<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Fill and Stroke Module Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="WD" name="w3c-status">
  <meta content="This module contains the features of CSS relating to filling and stroking text and SVG shapes." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/fill-stroke-3/" rel="canonical">
<style type="text/css">.mjx-chtml {display: inline-block; line-height: 0; text-indent: 0; text-align: left; text-transform: none; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; letter-spacing: normal; word-wrap: normal; word-spacing: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0; min-height: 0; border: 0; margin: 0; padding: 1px 0}
.MJXc-display {display: block; text-align: center; margin: 1em 0; padding: 0}
.mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex] {display: inline-table}
.mjx-math {display: inline-block; border-collapse: separate; border-spacing: 0}
.mjx-math * {display: inline-block; text-align: left}
.mjx-numerator {display: block; text-align: center}
.mjx-denominator {display: block; text-align: center}
.MJXc-stacked {height: 0; position: relative}
.MJXc-stacked > * {position: absolute}
.MJXc-bevelled > * {display: inline-block}
.mjx-stack {display: inline-block}
.mjx-op {display: block}
.mjx-under {display: table-cell}
.mjx-over {display: block}
.mjx-over > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-under > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-stack > .mjx-sup {display: block}
.mjx-stack > .mjx-sub {display: block}
.mjx-prestack > .mjx-presup {display: block}
.mjx-prestack > .mjx-presub {display: block}
.mjx-delim-h > .mjx-char {display: inline-block}
.mjx-surd {vertical-align: top}
.mjx-mphantom * {visibility: hidden}
.mjx-merror {background-color: #FFFF88; color: #CC0000; border: 1px solid #CC0000; padding: 2px 3px; font-style: normal; font-size: 90%}
.mjx-annotation-xml {line-height: normal}
.mjx-menclose > svg {fill: none; stroke: currentColor}
.mjx-mtr {display: table-row}
.mjx-mlabeledtr {display: table-row}
.mjx-mtd {display: table-cell; text-align: center}
.mjx-label {display: block}
.mjx-box {display: inline-block}
.mjx-block {display: block}
.mjx-span {display: inline}
.mjx-char {display: block; white-space: pre}
.mjx-itable {display: inline-table}
.mjx-row {display: table-row}
.mjx-cell {display: table-cell}
.mjx-table {display: table; width: 100%}
.mjx-line {display: block; height: 0}
.mjx-strut {width: 0; padding-top: 1em}
.mjx-vsize {width: 0}
.MJXc-space1 {margin-left: .167em}
.MJXc-space2 {margin-left: .222em}
.MJXc-space3 {margin-left: .278em}
.mjx-chartest {display: block; visibility: hidden; position: absolute; top: 0; line-height: normal; font-size: 500%}
.mjx-chartest .mjx-char {display: inline}
.mjx-chartest .mjx-box {padding-top: 1000px}
.MJXc-processing {visibility: hidden; position: fixed; width: 0; height: 0; overflow: hidden}
.MJXc-processed {display: none}
.mjx-test {display: block; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; text-indent: 0; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow: hidden; height: 1px}
.mjx-ex-box-test {position: absolute; width: 1px; height: 60ex}
#MathJax_CHTML_Tooltip {background-color: InfoBackground; color: InfoText; border: 1px solid black; box-shadow: 2px 2px 5px #AAAAAA; -webkit-box-shadow: 2px 2px 5px #AAAAAA; -moz-box-shadow: 2px 2px 5px #AAAAAA; -khtml-box-shadow: 2px 2px 5px #AAAAAA; padding: 3px 4px; z-index: 401; position: absolute; left: 0; top: 0; width: auto; height: auto; display: none}
.MathJax_SVG .noError {font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}
.MathJax .noError {font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}
.mjx-chtml .mjx-noError {line-height: 1.2; font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}
.MJXc-TeX-unknown-R {font-family: STIXGeneral,'Cambria Math','Arial Unicode MS',serif; font-style: normal; font-weight: normal}
.MJXc-TeX-unknown-I {font-family: STIXGeneral,'Cambria Math','Arial Unicode MS',serif; font-style: italic; font-weight: normal}
.MJXc-TeX-unknown-B {font-family: STIXGeneral,'Cambria Math','Arial Unicode MS',serif; font-style: normal; font-weight: bold}
.MJXc-TeX-unknown-BI {font-family: STIXGeneral,'Cambria Math','Arial Unicode MS',serif; font-style: italic; font-weight: bold}
.MJXc-TeX-ams-R {font-family: MJXc-TeX-ams-R,MJXc-TeX-ams-Rw}
.MJXc-TeX-cal-B {font-family: MJXc-TeX-cal-B,MJXc-TeX-cal-Bx,MJXc-TeX-cal-Bw}
.MJXc-TeX-frak-R {font-family: MJXc-TeX-frak-R,MJXc-TeX-frak-Rw}
.MJXc-TeX-frak-B {font-family: MJXc-TeX-frak-B,MJXc-TeX-frak-Bx,MJXc-TeX-frak-Bw}
.MJXc-TeX-math-BI {font-family: MJXc-TeX-math-BI,MJXc-TeX-math-BIx,MJXc-TeX-math-BIw}
.MJXc-TeX-sans-R {font-family: MJXc-TeX-sans-R,MJXc-TeX-sans-Rw}
.MJXc-TeX-sans-B {font-family: MJXc-TeX-sans-B,MJXc-TeX-sans-Bx,MJXc-TeX-sans-Bw}
.MJXc-TeX-sans-I {font-family: MJXc-TeX-sans-I,MJXc-TeX-sans-Ix,MJXc-TeX-sans-Iw}
.MJXc-TeX-script-R {font-family: MJXc-TeX-script-R,MJXc-TeX-script-Rw}
.MJXc-TeX-type-R {font-family: MJXc-TeX-type-R,MJXc-TeX-type-Rw}
.MJXc-TeX-cal-R {font-family: MJXc-TeX-cal-R,MJXc-TeX-cal-Rw}
.MJXc-TeX-main-B {font-family: MJXc-TeX-main-B,MJXc-TeX-main-Bx,MJXc-TeX-main-Bw}
.MJXc-TeX-main-I {font-family: MJXc-TeX-main-I,MJXc-TeX-main-Ix,MJXc-TeX-main-Iw}
.MJXc-TeX-main-R {font-family: MJXc-TeX-main-R,MJXc-TeX-main-Rw}
.MJXc-TeX-math-I {font-family: MJXc-TeX-math-I,MJXc-TeX-math-Ix,MJXc-TeX-math-Iw}
.MJXc-TeX-size1-R {font-family: MJXc-TeX-size1-R,MJXc-TeX-size1-Rw}
.MJXc-TeX-size2-R {font-family: MJXc-TeX-size2-R,MJXc-TeX-size2-Rw}
.MJXc-TeX-size3-R {font-family: MJXc-TeX-size3-R,MJXc-TeX-size3-Rw}
.MJXc-TeX-size4-R {font-family: MJXc-TeX-size4-R,MJXc-TeX-size4-Rw}
@font-face {font-family: MJXc-TeX-ams-R; src: local('MathJax_AMS'), local('MathJax_AMS-Regular')}
@font-face {font-family: MJXc-TeX-ams-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_AMS-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_AMS-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_AMS-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-cal-B; src: local('MathJax_Caligraphic Bold'), local('MathJax_Caligraphic-Bold')}
@font-face {font-family: MJXc-TeX-cal-Bx; src: local('MathJax_Caligraphic'); font-weight: bold}
@font-face {font-family: MJXc-TeX-cal-Bw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Bold.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Bold.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Bold.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-frak-R; src: local('MathJax_Fraktur'), local('MathJax_Fraktur-Regular')}
@font-face {font-family: MJXc-TeX-frak-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-frak-B; src: local('MathJax_Fraktur Bold'), local('MathJax_Fraktur-Bold')}
@font-face {font-family: MJXc-TeX-frak-Bx; src: local('MathJax_Fraktur'); font-weight: bold}
@font-face {font-family: MJXc-TeX-frak-Bw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Bold.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Bold.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Bold.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-math-BI; src: local('MathJax_Math BoldItalic'), local('MathJax_Math-BoldItalic')}
@font-face {font-family: MJXc-TeX-math-BIx; src: local('MathJax_Math'); font-weight: bold; font-style: italic}
@font-face {font-family: MJXc-TeX-math-BIw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Math-BoldItalic.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Math-BoldItalic.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Math-BoldItalic.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-sans-R; src: local('MathJax_SansSerif'), local('MathJax_SansSerif-Regular')}
@font-face {font-family: MJXc-TeX-sans-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-sans-B; src: local('MathJax_SansSerif Bold'), local('MathJax_SansSerif-Bold')}
@font-face {font-family: MJXc-TeX-sans-Bx; src: local('MathJax_SansSerif'); font-weight: bold}
@font-face {font-family: MJXc-TeX-sans-Bw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Bold.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Bold.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Bold.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-sans-I; src: local('MathJax_SansSerif Italic'), local('MathJax_SansSerif-Italic')}
@font-face {font-family: MJXc-TeX-sans-Ix; src: local('MathJax_SansSerif'); font-style: italic}
@font-face {font-family: MJXc-TeX-sans-Iw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Italic.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Italic.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Italic.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-script-R; src: local('MathJax_Script'), local('MathJax_Script-Regular')}
@font-face {font-family: MJXc-TeX-script-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Script-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Script-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Script-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-type-R; src: local('MathJax_Typewriter'), local('MathJax_Typewriter-Regular')}
@font-face {font-family: MJXc-TeX-type-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Typewriter-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Typewriter-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Typewriter-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-cal-R; src: local('MathJax_Caligraphic'), local('MathJax_Caligraphic-Regular')}
@font-face {font-family: MJXc-TeX-cal-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-main-B; src: local('MathJax_Main Bold'), local('MathJax_Main-Bold')}
@font-face {font-family: MJXc-TeX-main-Bx; src: local('MathJax_Main'); font-weight: bold}
@font-face {font-family: MJXc-TeX-main-Bw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Main-Bold.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Main-Bold.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Bold.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-main-I; src: local('MathJax_Main Italic'), local('MathJax_Main-Italic')}
@font-face {font-family: MJXc-TeX-main-Ix; src: local('MathJax_Main'); font-style: italic}
@font-face {font-family: MJXc-TeX-main-Iw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Main-Italic.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Main-Italic.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-main-R; src: local('MathJax_Main'), local('MathJax_Main-Regular')}
@font-face {font-family: MJXc-TeX-main-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-math-I; src: local('MathJax_Math Italic'), local('MathJax_Math-Italic')}
@font-face {font-family: MJXc-TeX-math-Ix; src: local('MathJax_Math'); font-style: italic}
@font-face {font-family: MJXc-TeX-math-Iw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-size1-R; src: local('MathJax_Size1'), local('MathJax_Size1-Regular')}
@font-face {font-family: MJXc-TeX-size1-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Size1-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Size1-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-size2-R; src: local('MathJax_Size2'), local('MathJax_Size2-Regular')}
@font-face {font-family: MJXc-TeX-size2-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Size2-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Size2-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Size2-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-size3-R; src: local('MathJax_Size3'), local('MathJax_Size3-Regular')}
@font-face {font-family: MJXc-TeX-size3-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Size3-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Size3-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Size3-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-size4-R; src: local('MathJax_Size4'), local('MathJax_Size4-Regular')}
@font-face {font-family: MJXc-TeX-size4-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Size4-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Size4-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Size4-Regular.otf') format('opentype')}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Fill and Stroke Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C First Public Working Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://www.w3.org/TR/1970/WD-fill-stroke-3-19700101/">https://www.w3.org/TR/1970/WD-fill-stroke-3-19700101/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/fill-stroke-3/">https://www.w3.org/TR/fill-stroke-3/</a>
     <dt>Editor's Draft:
     <dd><a href="https://drafts.fxtf.org/fill-stroke/">https://drafts.fxtf.org/fill-stroke/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com">Tab Atkins-Bittner</a> (<span class="p-org org">Google</span>)
     <dt class="editor">Former Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="39882"><a class="p-name fn u-email email" href="mailto:cam@mcc.id.au">Cameron McCormack</a> (<span class="p-org org">Mozilla Corporation</span>)
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/fxtf-drafts/blob/master/fill-stroke-3/Overview.bs">GitHub Editor</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/fxtf-drafts/labels/fill-stroke-3">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module contains the features of CSS relating to filling and stroking text and SVG shapes.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="https://www.w3.org/TR/">W3C technical reports
   index at https://www.w3.org/TR/.</a></em> </p>
   <p>This document is a <b>First Public Working Draft</b>. </p>
   <p>Publication as a First Public  Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress. </p>
   <p><a href="https://github.com/w3c/fxtf-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
    When filing an issue, please put the text “fill-stroke” in the title,
    preferably like this:
    “[fill-stroke] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-fxtf-archive/">archived</a>,
	and there is also a <a href="http://lists.w3.org/Archives/Public/public-fx/">historical archive</a>. </p>
   <p>This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p>This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy/"> W3C Patent Policy</a>. W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
   <p>This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>.</p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#paint"><span class="secno">2</span> <span class="content">Paint</span></a>
     <ol class="toc">
      <li><a href="#svg-paint"><span class="secno">2.1</span> <span class="content">SVG-Specific Paints</span></a>
     </ol>
    <li>
     <a href="#fills"><span class="secno">3</span> <span class="content">Fills</span></a>
     <ol class="toc">
      <li><a href="#fill-layering"><span class="secno">3.1</span> <span class="content">Layering Multiple Fills</span></a>
      <li>
       <a href="#fill-geometry"><span class="secno">3.2</span> <span class="content">Fill Geometry</span></a>
       <ol class="toc">
        <li><a href="#fill-rule"><span class="secno">3.2.1</span> <span class="content">Winding Rule for SVG shapes: the <span class="property">fill-rule</span> property</span></a>
        <li><a href="#fill-break"><span class="secno">3.2.2</span> <span class="content">Fragmented Fills: the <span class="property">fill-break</span> property</span></a>
       </ol>
      <li>
       <a href="#fill-paint"><span class="secno">3.3</span> <span class="content">Fill Paint</span></a>
       <ol class="toc">
        <li><a href="#fill-color"><span class="secno">3.3.1</span> <span class="content">Fill Color: the <span class="property">fill-color</span> property</span></a>
        <li><a href="#fill-image"><span class="secno">3.3.2</span> <span class="content">Fill Image Sources: the <span class="property">fill-image</span> property</span></a>
        <li><a href="#fill-origin"><span class="secno">3.3.3</span> <span class="content">Fill Positioning Area: the <span class="property">fill-origin</span> property</span></a>
        <li><a href="#fill-position"><span class="secno">3.3.4</span> <span class="content">Positioning Fill Images: the <span class="property">fill-position</span> property</span></a>
        <li><a href="#fill-size"><span class="secno">3.3.5</span> <span class="content">Sizing Fill Images: the <span class="property">fill-size</span> property</span></a>
        <li><a href="#fill-repeat"><span class="secno">3.3.6</span> <span class="content">Tiling Fill Images: the <span class="property">fill-repeat</span> property</span></a>
        <li><a href="#fill-shorthand"><span class="secno">3.3.7</span> <span class="content">Fill Shorthand: the <span class="property">fill</span> property</span></a>
       </ol>
      <li>
       <a href="#fill-filter"><span class="secno">3.4</span> <span class="content">Fill Transparency</span></a>
       <ol class="toc">
        <li><a href="#fill-opacity"><span class="secno">3.4.1</span> <span class="content">Fill Opacity: the <span class="property">fill-opacity</span> property</span></a>
       </ol>
     </ol>
    <li>
     <a href="#strokes"><span class="secno">4</span> <span class="content">Strokes (Outlines)</span></a>
     <ol class="toc">
      <li><a href="#stroke-layering"><span class="secno">4.1</span> <span class="content">Layering Multiple Strokes</span></a>
      <li>
       <a href="#stroke-geometry"><span class="secno">4.2</span> <span class="content">Stroke Geometry</span></a>
       <ol class="toc">
        <li><a href="#stroke-width"><span class="secno">4.2.1</span> <span class="content">Stroke Thickness: the <span class="property">stroke-width</span> property</span></a>
        <li><a href="#stroke-align"><span class="secno">4.2.2</span> <span class="content">Stroke Positioning: the <span class="property">stroke-align</span> property</span></a>
        <li><a href="#stroke-linecap"><span class="secno">4.2.3</span> <span class="content">Stroke End Shapes: the <span class="property">stroke-linecap</span> property</span></a>
        <li><a href="#stroke-linejoin"><span class="secno">4.2.4</span> <span class="content">Stroke Corner Shapes: the <span class="property">stroke-linejoin</span> property</span></a>
        <li><a href="#stroke-miterlimit"><span class="secno">4.2.5</span> <span class="content">Stroke Corner Limits: the <span class="property">stroke-miterlimit</span> property</span></a>
        <li><a href="#stroke-break"><span class="secno">4.2.6</span> <span class="content">Fragmented Strokes: the <span class="property">stroke-break</span> property</span></a>
       </ol>
      <li>
       <a href="#stroke-dashes"><span class="secno">4.3</span> <span class="content">Stroke Dashing</span></a>
       <ol class="toc">
        <li><a href="#stroke-dasharray"><span class="secno">4.3.1</span> <span class="content">Stroke Dash Patterns: the <span class="property">stroke-dasharray</span> property</span></a>
        <li><a href="#stroke-dashoffset"><span class="secno">4.3.2</span> <span class="content">Stroke Dash Start Position: the <span class="property">stroke-dashoffset</span> property</span></a>
        <li><a href="#corner-control"><span class="secno">4.3.3</span> <span class="content">Corner Control: the <span class="property">stroke-dash-corner</span> and <span class="property">stroke-dash-justify</span> properties</span></a>
       </ol>
      <li>
       <a href="#stroke-paint"><span class="secno">4.4</span> <span class="content">Stroke Paint</span></a>
       <ol class="toc">
        <li><a href="#stroke-color"><span class="secno">4.4.1</span> <span class="content">Stroke Color: the <span class="property">stroke-color</span> property</span></a>
        <li><a href="#stroke-image"><span class="secno">4.4.2</span> <span class="content">Stroke Image Sources: the <span class="property">stroke-image</span> property</span></a>
        <li><a href="#stroke-origin"><span class="secno">4.4.3</span> <span class="content">Stroke Positioning Area: the <span class="property">stroke-origin</span> property</span></a>
        <li><a href="#stroke-position"><span class="secno">4.4.4</span> <span class="content">Positioning Stroke Images: the <span class="property">stroke-position</span> property</span></a>
        <li><a href="#stroke-size"><span class="secno">4.4.5</span> <span class="content">Sizing Stroke Images: the <span class="property">stroke-size</span> property</span></a>
        <li><a href="#stroke-repeat"><span class="secno">4.4.6</span> <span class="content">Tiling Stroke Images: the <span class="property">stroke-repeat</span> property</span></a>
        <li><a href="#stroke-shorthand"><span class="secno">4.4.7</span> <span class="content">Stroke Shorthand: the <span class="property">stroke</span> property</span></a>
       </ol>
      <li>
       <a href="#stroke-filter"><span class="secno">4.5</span> <span class="content">Stroke Transparency</span></a>
       <ol class="toc">
        <li><a href="#stroke-opacity"><span class="secno">4.5.1</span> <span class="content">Stroke Opacity: the <span class="property">stroke-opacity</span> property</span></a>
       </ol>
      <li>
       <a href="#path-notes"><span class="secno">4.6</span> <span class="content">Computing the Shape of the Stroke</span></a>
       <ol class="toc">
        <li><a href="#stroke-paths"><span class="secno">4.6.1</span> <span class="content">Stroke Paths</span></a>
        <li><a href="#algo-stroke-shape"><span class="secno">4.6.2</span> <span class="content">Stroke Shape</span></a>
        <li><a href="#algo-dash-positions"><span class="secno">4.6.3</span> <span class="content">Dash Positions</span></a>
        <li><a href="#algo-cap-shapes"><span class="secno">4.6.4</span> <span class="content">Cap Shapes</span></a>
        <li><a href="#algo-line-join-shape"><span class="secno">4.6.5</span> <span class="content">Line Join Shape</span></a>
        <li><a href="#algo-arcs-linejoin"><span class="secno">4.6.6</span> <span class="content">Arcs Linejoin</span></a>
       </ol>
      <li><a href="#perfect-world"><span class="secno">4.7</span> <span class="content">Perfect-World Syntax</span></a>
     </ol>
    <li><a href="#text-decor"><span class="secno">5</span> <span class="content">Text Decoration Fills and Strokes</span></a>
    <li><a href="#priv-sec"><span class="secno">6</span> <span class="content">Privacy and Security Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>Text and SVG graphical elements that define a shape—<wbr><code><a data-link-type="element" href="https://www.w3.org/TR/svg2/paths.html#elementdef-path" id="ref-for-elementdef-path">path</a></code> elements, basic shapes such as <code><a data-link-type="element" href="https://www.w3.org/TR/svg2/shapes.html#elementdef-rect" id="ref-for-elementdef-rect">rect</a></code>—<wbr>are rendered by being <dfn data-dfn-type="dfn" data-noexport id="filled">filled<a class="self-link" href="#filled"></a></dfn>,
	which is painting the interior of the object,
	and <dfn data-dfn-type="dfn" data-noexport id="stroked">stroked<a class="self-link" href="#stroked"></a></dfn>,
	which is painting along the outline of the object.</p>
   <p>This specification describes how text and SVG graphical elements are filled and stroked,
	by defining a number of properties that control the appearance and shape
	of an element’s fill and stroke.</p>
   <p class="issue" id="issue-d13fcf01"><a class="self-link" href="#issue-d13fcf01"></a> Insert <a href="https://svgwg.org/svg2-draft/painting.html#SpecifyingPaint">Specifying Paint from SVG2</a>.</p>
   <p class="issue" id="issue-0349dccc"><a class="self-link" href="#issue-0349dccc"></a> Deal with text decoration. See <a href="https://www.w3.org/mid/20160422204811.GA17804@pescadero.dbaron.org">issue</a> and <a href="https://www.w3.org/mid/1400592192.22096.52.camel@localhost.localdomain">other issue</a>.</p>
   <h2 class="heading settled" data-level="2" id="paint"><span class="secno">2. </span><span class="content">Paint</span><a class="self-link" href="#paint"></a></h2>
   <p>Paint is what makes abstract geometries visible.
	It consists of colors, patterns, images, gradients, and other 2D graphics.
	The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-color/#valuea-def-color" id="ref-for-valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> type represents 0-dimensional paint;
	it is defined in <a data-link-type="biblio" href="#biblio-css3-color">[CSS3-COLOR]</a>.
	The <a class="production css" data-link-type="type" href="#typedef-paint" id="ref-for-typedef-paint" title="Expands to: none">&lt;paint></a> type represents 2-dimensional paint,
	and its syntax is:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-paint">&lt;paint></dfn> = none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css3-images/#image-type" id="ref-for-image-type">&lt;image></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production" data-link-type="type" href="#typedef-svg-paint" id="ref-for-typedef-svg-paint" title="Expands to: child(<integer>) | child">&lt;svg-paint></a>
</pre>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="<paint>" data-dfn-type="value" data-export id="valdef-paint-none">none</dfn>
    <dd data-md>
     <p>Indicates no paint is applied.</p>
    <dt data-md><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-images/#image-type" id="ref-for-image-type①">&lt;image></a>
    <dd data-md>
     <p>Defined in <a data-link-type="biblio" href="#biblio-css3-images">[CSS3-IMAGES]</a> and includes image references and gradients.</p>
    <dt data-md><a class="production css" data-link-type="type" href="#typedef-svg-paint" id="ref-for-typedef-svg-paint①" title="Expands to: child(<integer>) | child">&lt;svg-paint></a>
    <dd data-md>
     <p>References SVG paint servers,
and is defined in <a href="#svg-paint">§ 2.1 SVG-Specific Paints</a>.
A <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#url-value" id="ref-for-url-value">&lt;url></a> value here is treated as an <a data-link-type="dfn">ambiguous image URL</a>.</p>
   </dl>
   <h3 class="heading settled" data-level="2.1" id="svg-paint"><span class="secno">2.1. </span><span class="content">SVG-Specific Paints</span><a class="self-link" href="#svg-paint"></a></h3>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-svg-paint">&lt;svg-paint></dfn> = child <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> child( <a class="production" data-link-type="type" href="https://www.w3.org/TR/css3-values/#integer-value" id="ref-for-integer-value">&lt;integer></a> )
</pre>
   <dl>
    <dt data-md><dfn class="css" data-dfn-for="<svg-paint>" data-dfn-type="value" data-export id="valdef-svg-paint-child">child<a class="self-link" href="#valdef-svg-paint-child"></a></dfn>
    <dd data-md>
     <p>Refers to the last child <a data-link-type="dfn" href="https://www.w3.org/TR/svg2/painting.html#TermPaintServerElement" id="ref-for-TermPaintServerElement">paint server element</a> of the element being painted.</p>
     <p>If there is no such child,
behaves as <a class="css" data-link-type="maybe" href="#valdef-paint-none" id="ref-for-valdef-paint-none">none</a>.</p>
    <dt data-md><dfn class="css" data-dfn-for="<svg-paint>" data-dfn-type="value" data-export id="valdef-svg-paint-child-integer">child(<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#integer-value" id="ref-for-integer-value①">&lt;integer></a>)<a class="self-link" href="#valdef-svg-paint-child-integer"></a></dfn>
    <dd data-md>
     <p>This <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation">functional notation</a>,
which accepts a positive integer as its argument,
refers to the nth child <a data-link-type="dfn" href="https://www.w3.org/TR/svg2/painting.html#TermPaintServerElement" id="ref-for-TermPaintServerElement①">paint server element</a> (1-indexed, as for <span class="css">::nth-child()</span>)
of the element being painted.</p>
     <p>If there is no such child,
behaves as <a class="css" data-link-type="maybe" href="#valdef-paint-none" id="ref-for-valdef-paint-none①">none</a>.</p>
     <p>Arguments less than 1 are invalid.</p>
   </dl>
   <p class="issue" id="issue-d41d8cd9"><a class="self-link" href="#issue-d41d8cd9"></a> <a href="https://github.com/w3c/csswg-drafts/issues/383">&lt;https://github.com/w3c/csswg-drafts/issues/383></a></p>
   <p class="issue" id="issue-befd2a50"><a class="self-link" href="#issue-befd2a50"></a> <span class="css">context-fill</span> and <span class="css">context-stroke</span> need to be worked into the spec,
	but they belong as keywords on each individual <a class="property" data-link-type="propdesc" href="#propdef-stroke" id="ref-for-propdef-stroke">stroke</a> and <a class="property" data-link-type="propdesc" href="#propdef-fill" id="ref-for-propdef-fill">fill</a> sub-property,
	not as a <a class="production css" data-link-type="type" href="#typedef-paint" id="ref-for-typedef-paint①" title="Expands to: none">&lt;paint></a> value.
	Needs more WG discussion,
	and confirmation that this is an SVG2 feature that will be kept,
	before we do the relatively substantial edits for it.</p>
   <p class="issue" id="issue-04ca3f73"><a class="self-link" href="#issue-04ca3f73"></a> <a href="https://www.w3.org/TR/css4-images/#paint-sources">CSS Images 4 §2.6.1 Paint Sources</a> defines how to handle SVG paint server coordinate spaces.
	Copy, ref, or something else here?</p>
   <h2 class="heading settled" data-level="3" id="fills"><span class="secno">3. </span><span class="content">Fills</span><a class="self-link" href="#fills"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fill">fill</dfn> paints within
	the outlines of an SVG shape or the glyphs of an inline (or SVG text) box.
	Similar to backgrounds <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>, <a data-link-type="dfn" href="#fill" id="ref-for-fill">fills</a> can be a solid color (<a class="property" data-link-type="propdesc" href="#propdef-fill-color" id="ref-for-propdef-fill-color">fill-color</a>) and/or an image pattern (<a class="property" data-link-type="propdesc" href="#propdef-fill-image" id="ref-for-propdef-fill-image">fill-image</a> etc.).</p>
   <p><strong class="advisement"> It is strongly recommended to use the <a class="property" data-link-type="propdesc" href="#propdef-fill" id="ref-for-propdef-fill①">fill</a> shorthand when setting <a data-link-type="dfn" href="#fill" id="ref-for-fill①">fills</a>.
	The individual <a href="#fill-paint">painting longhands</a> should only be used when it’s needed to alter one individual aspect.</strong></p>
   <p class="issue" id="issue-7b241059"><a class="self-link" href="#issue-7b241059"></a> Add a <span class="css">box-break</span> property that is a shorthand for <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a>, <a class="property" data-link-type="propdesc" href="#propdef-fill-break" id="ref-for-propdef-fill-break">fill-break</a>, and <a class="property" data-link-type="propdesc" href="#propdef-stroke-break" id="ref-for-propdef-stroke-break">stroke-break</a>?</p>
   <h3 class="heading settled" data-level="3.1" id="fill-layering"><span class="secno">3.1. </span><span class="content">Layering Multiple Fills</span><a class="self-link" href="#fill-layering"></a></h3>
   <p>The fill of a box can have multiple layers.
	The number of layers is determined by the number of comma-separated values for the <a class="property" data-link-type="propdesc" href="#propdef-fill-image" id="ref-for-propdef-fill-image①">fill-image</a> property.
	A value of <span class="css">none</span> still creates a layer.</p>
   <p>List-valued properties interact exactly as for background images,
	defined in <a href="https://www.w3.org/TR/css3-background/#layering">CSS Backgrounds 3 §3.1 Layering Multiple Background Images</a>.</p>
   <h3 class="heading settled" data-level="3.2" id="fill-geometry"><span class="secno">3.2. </span><span class="content">Fill Geometry</span><a class="self-link" href="#fill-geometry"></a></h3>
   <h4 class="heading settled" data-level="3.2.1" id="fill-rule"><span class="secno">3.2.1. </span><span class="content">Winding Rule for SVG shapes: the <a class="property" data-link-type="propdesc" href="#propdef-fill-rule" id="ref-for-propdef-fill-rule">fill-rule</a> property</span><a class="self-link" href="#fill-rule"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-rule">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-rule">fill-rule</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">nonzero <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> evenodd 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>nonzero 
     <tr>
      <th>Applies to:
      <td>SVG shapes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-fill-rule" id="ref-for-propdef-fill-rule①">fill-rule</a> property indicates the rule
	used to determine what parts of the canvas are included inside the shape.
	For a simple, non-intersecting path,
	it is intuitively clear what region lies “inside”;
	however, for a more complex path,
	such as a path that intersects itself
	or where one subpath encloses another,
	the interpretation of “inside” is not so obvious.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-fill-rule" id="ref-for-propdef-fill-rule②">fill-rule</a> property provides two options for how the inside of a shape is determined:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="fill-rule" data-dfn-type="value" data-export id="valdef-fill-rule-nonzero">nonzero</dfn> 
    <dd>
      This rule determines the “insideness” of a point on the canvas
			by drawing a ray from that point to infinity in any direction
			and then examining the places where a segment of the shape crosses the ray.
			Starting with a count of zero,
			add one each time a path segment crosses the ray from left to right
			and subtract one each time a path segment crosses the ray from right to left.
			After counting the crossings,
			if the result is zero then the point is outside the path.
			Otherwise, it is inside. 
     <figure>
       <img src="images/fillrule-nonzero.svg"> 
      <figcaption> The effect of a nonzero fill rule on paths with self-intersections and enclosed subpaths. </figcaption>
     </figure>
    <dt><dfn class="dfn-paneled css" data-dfn-for="fill-rule" data-dfn-type="value" data-export id="valdef-fill-rule-evenodd">evenodd</dfn> 
    <dd>
      This rule determines the “insideness” of a point on the canvas
			by drawing a ray from that point to infinity in any direction
			and counting the number of path segments from the given shape that the ray crosses.
			If this number is odd,
			the point is inside;
			if even,
			the point is outside. 
     <figure>
       <img src="images/fillrule-evenodd.svg"> 
      <figcaption> The effect of an evenodd fill rule on paths with self-intersections and enclosed subpaths. </figcaption>
     </figure>
   </dl>
   <p class="note" role="note"><span>Note:</span> The above descriptions do not specify what to do
	if a path segment coincides with or is tangent to the ray.
	Since any ray will do,
	one may simply choose a different ray that does not have such problem intersections.</p>
   <p>This property does not apply to text
	(whether SVG or CSS),
	as the “inside” of a text glyph is intrinsically defined.</p>
   <p class="issue" id="issue-45d6cd25"><a class="self-link" href="#issue-45d6cd25"></a> Should this be layerized?</p>
   <h4 class="heading settled" data-level="3.2.2" id="fill-break"><span class="secno">3.2.2. </span><span class="content">Fragmented Fills: the <a class="property" data-link-type="propdesc" href="#propdef-fill-break" id="ref-for-propdef-fill-break①">fill-break</a> property</span><a class="self-link" href="#fill-break"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-break">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-break">fill-break</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">bounding-box <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> slice <span id="ref-for-comb-one⑤">|</span> clone 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>bounding-box 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes? 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>No 
   </table>
   <p>This property specifies how the geometry of a <a data-link-type="dfn" href="https://www.w3.org/TR/css3-break/#fragment" id="ref-for-fragment">fragmented</a> box is treated for <a data-link-type="dfn" href="#fill" id="ref-for-fill②">fills</a>.</p>
   <p>Values have the following meanings: COPY FROM FRAGMENTATION</p>
   <h3 class="heading settled" data-level="3.3" id="fill-paint"><span class="secno">3.3. </span><span class="content">Fill Paint</span><a class="self-link" href="#fill-paint"></a></h3>
   <h4 class="heading settled" data-level="3.3.1" id="fill-color"><span class="secno">3.3.1. </span><span class="content">Fill Color: the <a class="property" data-link-type="propdesc" href="#propdef-fill-color" id="ref-for-propdef-fill-color①">fill-color</a> property</span><a class="self-link" href="#fill-color"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-color">fill-color</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-color/#valuea-def-color" id="ref-for-valuea-def-color①" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>currentcolor 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the computed color 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as color 
   </table>
   <p>This property sets the fill color of an element.
	This color is drawn behind any fill images.</p>
   <p><strong class="advisement"> It’s recommended that authors use the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a> property to set the color of text,
	rather than <a class="property" data-link-type="propdesc" href="#propdef-fill-color" id="ref-for-propdef-fill-color②">fill-color</a>.</strong></p>
   <p>Unlike <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-color" id="ref-for-propdef-background-color">background-color</a>,
	the fill color must only be drawn if the final layer of <a class="property" data-link-type="propdesc" href="#propdef-fill-image" id="ref-for-propdef-fill-image②">fill-image</a> is <span class="css">none</span> or an <a data-link-type="dfn" href="https://www.w3.org/TR/css4-images/#invalid-image" id="ref-for-invalid-image">invalid image</a>.
	If it’s a <span id="ref-for-invalid-image①">valid image</span>,
	the fill color must not be drawn.</p>
   <p class="note" role="note"><span>Note:</span> This is required to match the legacy behavior of SVG’s <a class="property" data-link-type="propdesc" href="#propdef-fill" id="ref-for-propdef-fill②">fill</a> property,
	which built in a "fallback color" to the single-layer image syntax.
	In CSS this is better achieved with the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css4-images/#funcdef-image" id="ref-for-funcdef-image">image()</a> function,
	which makes fallback explicit.</p>
   <p class="issue" id="issue-30b78afa"><a class="self-link" href="#issue-30b78afa"></a> <a class="property" data-link-type="propdesc" href="#propdef-fill-color" id="ref-for-propdef-fill-color③">fill-color</a> should be layerized, like <a class="property" data-link-type="propdesc" href="#propdef-stroke-color" id="ref-for-propdef-stroke-color">stroke-color</a>,
	so the two sets of properties are maximally consistent.</p>
   <p>SVG user agents must include the following rules
	(or their equivalent)
	in their <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade-origin-ua" id="ref-for-cascade-origin-ua">user agent style sheet</a>:</p>
<pre class="lang-css highlight"><c- n>@namespace</c-> svg <c- s>"http://www.w3.org/2000/svg"</c-><c- p>;</c->
<c- f>svg:svg:root, *|*:not(svg|*) > svg:svg </c-><c- p>{</c->
  <c- k>fill-color</c-><c- p>:</c-> black<c- p>;</c->
<c- p>}</c->
</pre>
   <h4 class="heading settled" data-level="3.3.2" id="fill-image"><span class="secno">3.3.2. </span><span class="content">Fill Image Sources: the <a class="property" data-link-type="propdesc" href="#propdef-fill-image" id="ref-for-propdef-fill-image③">fill-image</a> property</span><a class="self-link" href="#fill-image"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-image">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-image">fill-image</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-paint" id="ref-for-typedef-paint②" title="Expands to: none">&lt;paint></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, with any <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-images/#image-type" id="ref-for-image-type②">&lt;image></a> computed 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as repeatable list of images 
   </table>
   <p>This property sets the fill images of an element.
	Images are drawn with the first specified one on top (closest to the user)
	and each subsequent image behind the previous one.
	Values are interpreted identically to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-image" id="ref-for-propdef-background-image">background-image</a>,
	mutatis mutandi.</p>
   <h4 class="heading settled" data-level="3.3.3" id="fill-origin"><span class="secno">3.3.3. </span><span class="content">Fill Positioning Area: the <a class="property" data-link-type="propdesc" href="#propdef-fill-origin" id="ref-for-propdef-fill-origin">fill-origin</a> property</span><a class="self-link" href="#fill-origin"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-origin">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-origin">fill-origin</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">match-parent <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> fill-box <span id="ref-for-comb-one⑦">|</span> stroke-box <span id="ref-for-comb-one⑧">|</span> content-box <span id="ref-for-comb-one⑨">|</span> padding-box <span id="ref-for-comb-one①⓪">|</span> border-box 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>match-parent 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p>This property specifies the coordinate system of the <a data-link-type="dfn" href="#fill" id="ref-for-fill③">fill</a>,
	setting the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="fill-positioning-area">fill positioning area</dfn>.
	Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="fill-origin" data-dfn-type="value" data-export id="valdef-fill-origin-match-parent">match-parent</dfn> 
    <dd> Use the same <a data-link-type="dfn" href="#fill-positioning-area" id="ref-for-fill-positioning-area">fill positioning area</a> as the parent.
			If it has no parent, use the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="fill-origin" data-dfn-type="value" data-export id="valdef-fill-origin-content-box">content-box</dfn> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="fill-origin" data-dfn-type="value" data-export id="valdef-fill-origin-padding-box">padding-box</dfn> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="fill-origin" data-dfn-type="value" data-export id="valdef-fill-origin-border-box">border-box</dfn> 
    <dd> Use the box’s own content-box/padding-box/border-box as the <a data-link-type="dfn" href="#fill-positioning-area" id="ref-for-fill-positioning-area①">fill positioning area</a>.
			For <a data-link-type="dfn">SVG shapes</a>, <a class="css" data-link-type="maybe" href="#valdef-fill-origin-content-box" id="ref-for-valdef-fill-origin-content-box">content-box</a> and <a class="css" data-link-type="maybe" href="#valdef-fill-origin-padding-box" id="ref-for-valdef-fill-origin-padding-box">padding-box</a> are treated as <a class="css" data-link-type="maybe" href="#valdef-fill-origin-fill-box" id="ref-for-valdef-fill-origin-fill-box">fill-box</a>,
			while <a class="css" data-link-type="maybe" href="#valdef-fill-origin-border-box" id="ref-for-valdef-fill-origin-border-box">border-box</a> is treated as <a class="css" data-link-type="maybe" href="#valdef-fill-origin-stroke-box" id="ref-for-valdef-fill-origin-stroke-box">stroke-box</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="fill-origin" data-dfn-type="value" data-export id="valdef-fill-origin-fill-box">fill-box</dfn> 
    <dd> For <a data-link-type="dfn">SVG shapes</a> or SVG text,
			use the <a data-link-type="dfn" href="https://www.w3.org/TR/svg2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox">object bounding box</a> of the element.
			For CSS boxes,
			use the bounding box of the text glyph outlines
			of the element and all in-flow or floated descendants. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="fill-origin" data-dfn-type="value" data-export id="valdef-fill-origin-stroke-box">stroke-box</dfn> 
    <dd> For <a data-link-type="dfn">SVG shapes</a> or SVG text,
			use the <a data-link-type="dfn" href="https://www.w3.org/TR/svg2/coords.html#TermStrokeBoundingBox" id="ref-for-TermStrokeBoundingBox">stroke bounding box</a> of the element.
			For CSS boxes,
			use the bounding box of the text glyph stroke outlines
			of the element and all in-flow or floated descendants. 
   </dl>
   <p>The SVG UA style sheet is amended to include the following rules:</p>
<pre class="lang-css highlight"><c- f>svg:svg </c-><c- p>{</c->
  <c- k>fill-origin</c-><c- p>:</c-> content-box<c- p>;</c->
<c- p>}</c->
</pre>
   <p>The <dfn data-dfn-type="dfn" data-export id="fill-painting-area">fill painting area<a class="self-link" href="#fill-painting-area"></a></dfn> is infinite in size.
	When painting,
	the fill color/images are intersected with the glyph areas of the affected text,
	or the fill geometry of the affected <a data-link-type="dfn">SVG shape</a>.</p>
   <p class="issue" id="issue-8b7a4ffb"><a class="self-link" href="#issue-8b7a4ffb"></a> SVG paint servers carry around their own originator information in *Units attributes,
	but maybe SVGWG can add a new value that makes them pay attention to the CSS originator.
	Alternately, we can add an <span class="css">auto</span> initial value here,
	which defers to the paint server’s information
	if you’re referring to one,
	and otherwise is <a class="css" data-link-type="maybe" href="#valdef-fill-origin-match-parent" id="ref-for-valdef-fill-origin-match-parent">match-parent</a>.</p>
   <h4 class="heading settled" data-level="3.3.4" id="fill-position"><span class="secno">3.3.4. </span><span class="content">Positioning Fill Images: the <a class="property" data-link-type="propdesc" href="#propdef-fill-position" id="ref-for-propdef-fill-position">fill-position</a> property</span><a class="self-link" href="#fill-position"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-position">fill-position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-position" id="ref-for-typedef-position">&lt;position></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma①">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0% 0% 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as <a data-link-type="dfn" href="https://www.w3.org/TR/web-animations-1/#repeatable-list" id="ref-for-repeatable-list">repeatable list</a> of <a data-link-type="dfn">simple list</a> of length, percentage, or calc 
   </table>
   <p>If fill images have been specified,
	this property specifies their initial position
	(after any resizing)
	within their corresponding <a data-link-type="dfn" href="#fill-positioning-area" id="ref-for-fill-positioning-area②">fill positioning area</a>.
	Values are interpreted identically to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a>,
	mutatis mutandi.</p>
   <h4 class="heading settled" data-level="3.3.5" id="fill-size"><span class="secno">3.3.5. </span><span class="content">Sizing Fill Images: the <a class="property" data-link-type="propdesc" href="#propdef-fill-size" id="ref-for-propdef-fill-size">fill-size</a> property</span><a class="self-link" href="#fill-size"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-size">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-size">fill-size</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-background/#typedef-bg-size" id="ref-for-typedef-bg-size">&lt;bg-size></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma②">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, but with lengths made absolute and omitted <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-background/#valdef-background-size-auto" id="ref-for-valdef-background-size-auto">auto</a> keywords filled in 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as <a data-link-type="dfn" href="https://www.w3.org/TR/web-animations-1/#repeatable-list" id="ref-for-repeatable-list①">repeatable list</a> of <a data-link-type="dfn">simple list</a> of length, percentage, or calc 
   </table>
   <p>Specifies the size of the fill images.
	Values are interpreted identically to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-size" id="ref-for-propdef-background-size">background-size</a>,
	mutatis mutandi.</p>
   <h4 class="heading settled" data-level="3.3.6" id="fill-repeat"><span class="secno">3.3.6. </span><span class="content">Tiling Fill Images: the <a class="property" data-link-type="propdesc" href="#propdef-fill-repeat" id="ref-for-propdef-fill-repeat">fill-repeat</a> property</span><a class="self-link" href="#fill-repeat"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-repeat">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-repeat">fill-repeat</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-background/#typedef-repeat-style" id="ref-for-typedef-repeat-style">&lt;repeat-style></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma③">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>repeat 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>A list, each item consisting of: two keywords, one per dimension 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p>Specifies how fill images are tiled after they have been sized and positioned.
	Values are interpreted identically to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-repeat" id="ref-for-propdef-background-repeat">background-repeat</a>,
	mutatis mutandi.</p>
   <h4 class="heading settled" data-level="3.3.7" id="fill-shorthand"><span class="secno">3.3.7. </span><span class="content">Fill Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-fill" id="ref-for-propdef-fill③">fill</a> property</span><a class="self-link" href="#fill-shorthand"></a></h4>
   <table class="def propdef" data-link-for-hint="fill">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill">fill</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background" id="ref-for-propdef-background">&lt;'background'></a> with modifications 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>See individual properties 
     <tr>
      <th>Applies to:
      <td>See individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>See individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>See individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>See individual properties 
   </table>
   <p>This property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property">shorthand</a> that sets all of the fill painting properties—<wbr><a class="property" data-link-type="propdesc" href="#propdef-fill-color" id="ref-for-propdef-fill-color④">fill-color</a>, <a class="property" data-link-type="propdesc" href="#propdef-fill-image" id="ref-for-propdef-fill-image④">fill-image</a>, <a class="property" data-link-type="propdesc" href="#propdef-fill-origin" id="ref-for-propdef-fill-origin①">fill-origin</a>, <a class="property" data-link-type="propdesc" href="#propdef-fill-position" id="ref-for-propdef-fill-position①">fill-position</a>, <a class="property" data-link-type="propdesc" href="#propdef-fill-size" id="ref-for-propdef-fill-size①">fill-size</a>,
	and <a class="property" data-link-type="propdesc" href="#propdef-fill-repeat" id="ref-for-propdef-fill-repeat①">fill-repeat</a>—<wbr>in one declaration.
	Omitted values are set to their initial value,
	except that an omitted <span class="property" id="ref-for-propdef-fill-color⑤">fill-color</span> is set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent">transparent</a>,
	and an omitted <span class="property" id="ref-for-propdef-fill-origin②">fill-origin</span> is set to <a class="css" data-link-type="maybe" href="#valdef-fill-origin-fill-box" id="ref-for-valdef-fill-origin-fill-box①">fill-box</a>.</p>
   <p class="issue" id="issue-18dac41b"><a class="self-link" href="#issue-18dac41b"></a> What should be the default value for fill-origin when set via this shorthand?
	content-box or fill-box?
	fill-box works better for fancy/overflowing fonts like Zapfino,
	but it’s much more expensive to calculate than content-box.</p>
   <p class="issue" id="issue-c25d18b5"><a class="self-link" href="#issue-c25d18b5"></a> SVG has special color fallback syntax—<wbr>a color following an image is only drawn if the image fails.
	This conflicts with our desire to match <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background" id="ref-for-propdef-background①">background</a>,
	because <a class="css" data-link-type="propdesc" href="#propdef-fill" id="ref-for-propdef-fill④">fill: url(#foo) red;</a> does *not* fill with red and then draw #foo.
	Compromise: fill-color is a fallback color,
	but both <span class="css">none</span> and <a data-link-type="dfn" href="https://www.w3.org/TR/css4-images/#invalid-image" id="ref-for-invalid-image②">invalid images</a> trigger the fallback.
	So <span class="css" id="ref-for-propdef-fill⑤">fill: url(#foo) red;</span> will only draw the red if there is no #foo (like SVG),
	but <span class="css" id="ref-for-propdef-fill⑥">fill: url(#foo), red</span> (equivalent to <span class="css">none red</span> on the last layer)
	will draw the red <em>and</em> the #foo (like <span class="property" id="ref-for-propdef-background②">background</span>).</p>
   <h3 class="heading settled" data-level="3.4" id="fill-filter"><span class="secno">3.4. </span><span class="content">Fill Transparency</span><a class="self-link" href="#fill-filter"></a></h3>
   <h4 class="heading settled" data-level="3.4.1" id="fill-opacity"><span class="secno">3.4.1. </span><span class="content">Fill Opacity: the <a class="property" data-link-type="propdesc" href="#propdef-fill-opacity" id="ref-for-propdef-fill-opacity">fill-opacity</a> property</span><a class="self-link" href="#fill-opacity"></a></h4>
   <table class="def propdef" data-link-for-hint="fill-opacity">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-fill-opacity">fill-opacity</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">&lt;'opacity'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>1 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the specified value converted to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#number-value" id="ref-for-number-value">&lt;number></a>, clamped to the range [0,1] 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as number 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-fill-opacity" id="ref-for-propdef-fill-opacity①">fill-opacity</a> property specifies the opacity of the painting operation
	used to fill the element.
	As with <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity①">opacity</a>,
	a value of <span class="css">0</span> or <span class="css">0%</span> means fully transparent,
	and a value of <span class="css">1</span> or <span class="css">100%</span> means fully opaque.</p>
   <h2 class="heading settled" data-level="4" id="strokes"><span class="secno">4. </span><span class="content">Strokes (Outlines)</span><a class="self-link" href="#strokes"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stroke">stroke</dfn> draws a border along
	the outlines of an SVG shape or the glyphs of an inline (or SVG text) box.
	The resulting area can be filled similar to the <a data-link-type="dfn" href="#fill" id="ref-for-fill④">fill</a> area. <a data-link-type="dfn" href="#stroke" id="ref-for-stroke">Strokes</a> can be a solid color (<a class="property" data-link-type="propdesc" href="#propdef-stroke-color" id="ref-for-propdef-stroke-color①">stroke-color</a>) and/or an image pattern (<a class="property" data-link-type="propdesc" href="#propdef-stroke-image" id="ref-for-propdef-stroke-image">stroke-image</a> etc.).</p>
   <p><strong class="advisement"> It is strongly recommended to use the <a class="property" data-link-type="propdesc" href="#propdef-stroke" id="ref-for-propdef-stroke①">stroke</a> shorthand when setting <a data-link-type="dfn" href="#stroke" id="ref-for-stroke①">strokes</a>.
	The individual <a href="#stroke-paint">painting longhands</a> should only be used when it’s needed to alter one individual aspect.</strong></p>
   <p>By default, <a data-link-type="dfn" href="#stroke" id="ref-for-stroke②">strokes</a> are drawn on top of <a data-link-type="dfn" href="#fill" id="ref-for-fill⑤">fills</a>;
	the drawing order is controlled by the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/svg2/painting.html#PaintOrderProperty" id="ref-for-PaintOrderProperty">paint-order</a> property.</p>
   <h3 class="heading settled" data-level="4.1" id="stroke-layering"><span class="secno">4.1. </span><span class="content">Layering Multiple Strokes</span><a class="self-link" href="#stroke-layering"></a></h3>
   <p>The stroke of a box can have multiple layers.
	The number of layers is determined by the larger of
	the number of comma-separated values for the <a class="property" data-link-type="propdesc" href="#propdef-stroke-image" id="ref-for-propdef-stroke-image①">stroke-image</a> property
	and the number of comma-separated values for the <a class="property" data-link-type="propdesc" href="#propdef-stroke-color" id="ref-for-propdef-stroke-color②">stroke-color</a> property.
	A value of <span class="css">none</span> still creates a layer.</p>
   <p>If the two properties have different lengths,
	the values are aligned from the end,
	with missing front values for <a class="property" data-link-type="propdesc" href="#propdef-stroke-color" id="ref-for-propdef-stroke-color③">stroke-color</a> defaulting to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent①">transparent</a>,
	and missing front values for <a class="property" data-link-type="propdesc" href="#propdef-stroke-image" id="ref-for-propdef-stroke-image②">stroke-image</a> defaulting to <span class="css">none</span>.</p>
   <p>List-valued properties interact exactly as for background images,
	defined in <a href="https://www.w3.org/TR/css3-background/#layering">CSS Backgrounds 3 §3.1 Layering Multiple Background Images</a>.</p>
   <p class="issue" id="issue-3d7e0f3e"><a class="self-link" href="#issue-3d7e0f3e"></a> <a class="property" data-link-type="propdesc" href="#propdef-stroke-color" id="ref-for-propdef-stroke-color④">stroke-color</a> must front-fill with <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent②">transparent</a>,
	otherwise multiple image layers will randomly fall back to solid colors
	if the image fails to load.
	Do we want to have strokes and fills front-fill with initial values in general,
	or should the rest of these properties repeat their lists as they do for backgrounds?</p>
   <h3 class="heading settled" data-level="4.2" id="stroke-geometry"><span class="secno">4.2. </span><span class="content">Stroke Geometry</span><a class="self-link" href="#stroke-geometry"></a></h3>
   <p class="issue" id="issue-b606844c"><a class="self-link" href="#issue-b606844c"></a> We currently layerize the stroke paint props, and <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width">stroke-width</a>,
	per SVGWG resolution.
	Should we layerize the other geometry properties?
	They have similar use-cases,
	albeit somewhat more niche,
	and consistency in API is important.
	Worth the implementation/testing effort?
	Hard case: <a class="property" data-link-type="propdesc" href="#propdef-stroke-dasharray" id="ref-for-propdef-stroke-dasharray">stroke-dasharray</a>,
	because it has "commas anywhere lol" syntax.</p>
   <h4 class="heading settled" data-level="4.2.1" id="stroke-width"><span class="secno">4.2.1. </span><span class="content">Stroke Thickness: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width①">stroke-width</a> property</span><a class="self-link" href="#stroke-width"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-width">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-width">stroke-width</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma④">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>1px 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>relative to the <a data-link-type="dfn" href="#scaled-viewport-size" id="ref-for-scaled-viewport-size">scaled viewport size</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the absolute length, or percentage 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a> 
   </table>
   <p>This property specifies the width of the strokes on the outline.
	A zero value causes no stroke to be painted for that layer.
	Negative values are invalid.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scaled-viewport-size">scaled viewport size</dfn> is the geometric mean of the viewport width and height.</p>
   <h4 class="heading settled" data-level="4.2.2" id="stroke-align"><span class="secno">4.2.2. </span><span class="content">Stroke Positioning: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align">stroke-align</a> property</span><a class="self-link" href="#stroke-align"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-align">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-align">stroke-align</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> inset <span id="ref-for-comb-one①②">|</span> outset 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>center 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p>This property allows the author to align a <a data-link-type="dfn" href="#stroke" id="ref-for-stroke③">stroke</a> along the outline.</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-align" data-dfn-type="value" data-export id="valdef-stroke-align-center">center</dfn> 
    <dd> The stroke for each subpath
			is centered on the outline. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-align" data-dfn-type="value" data-export id="valdef-stroke-align-inset">inset</dfn> 
    <dd>
      The stroke for each subpath
			lies on the “inside” of the outline
			(into the fill area). 
     <p>The <a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin">stroke-linejoin</a> property must be ignored.</p>
     <p class="issue" id="issue-1627f4e7"><a class="self-link" href="#issue-1627f4e7"></a> Why is <a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin①">stroke-linejoin</a> ignored?
			It’s still needed for interior corners.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-align" data-dfn-type="value" data-export id="valdef-stroke-align-outset">outset</dfn> 
    <dd> The stroke for each subpath
			lies on the “outside” of the outline
			(outside the fill area). 
   </dl>
   <div class="issue" id="issue-70831a2b">
    <a class="self-link" href="#issue-70831a2b"></a> Text is easy, as are simple closed, non-self-intersecting paths,
		but the other categories exist and need good definitions. 
    <p>How does this apply to open path segments?
		One suggestion is to alias <a class="css" data-link-type="maybe" href="#valdef-stroke-align-outset" id="ref-for-valdef-stroke-align-outset">outset</a> to <span class="css">left</span> and <a class="css" data-link-type="maybe" href="#valdef-stroke-align-inset" id="ref-for-valdef-stroke-align-inset">inset</a> to <span class="css">right</span> for open paths.
		How are end caps handled?</p>
    <figure>
      <img src="images/stroke-align-open-path.svg"> 
     <figcaption>
      <ol>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align①">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-center" id="ref-for-valdef-stroke-align-center">center</a> value.</p>
       <li data-md>
        <p>Fill region.</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align②">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-inset" id="ref-for-valdef-stroke-align-inset①">inset</a> value per spec (? stroke only paints inside fill region).</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align③">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-outset" id="ref-for-valdef-stroke-align-outset①">outset</a> value (implemented by blocking out fill region).</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align④">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-inset" id="ref-for-valdef-stroke-align-inset②">inset</a> value, alternative interpretation.</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align⑤">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-outset" id="ref-for-valdef-stroke-align-outset②">outset</a> value per spec (?).</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align⑥">stroke-align</a> alternative <span class="css">left</span> value; pink shows round line-cap.</p>
      </ol>
     </figcaption>
    </figure>
    <p>How does this apply to paths with loops?
		Is the region inside the red circle in the below figure part of the stroked (as shown)?
		Are internal edges stroked if the fill rule is <a class="css" data-link-type="maybe" href="#valdef-fill-rule-nonzero" id="ref-for-valdef-fill-rule-nonzero">nonzero</a>; if so how?
		(Shown without stroking below.)</p>
    <figure>
      <img src="images/stroke-align-intersecting-path.svg"> 
     <figcaption>
      <ul>
       <li data-md>
        <p>Top row: Normal stroke. Stroke left. Stroke right.</p>
       <li data-md>
        <p>Middle row: Fill rule <a class="css" data-link-type="maybe" href="#valdef-fill-rule-nonzero" id="ref-for-valdef-fill-rule-nonzero①">nonzero</a>, no stroke. Stroke outside. Stroke inside.</p>
       <li data-md>
        <p>Bottom row: Fill rule <a class="css" data-link-type="maybe" href="#valdef-fill-rule-evenodd" id="ref-for-valdef-fill-rule-evenodd">evenodd</a>, no stroke. Stroke outside. Stroke inside.</p>
      </ul>
     </figcaption>
    </figure>
    <p>How are dashes handled? Are they based on original path?</p>
    <figure>
      <img src="images/stroke-align-dashes.svg"> 
     <figcaption>
      <ol>
       <li data-md>
        <p>Normal dash pattern.</p>
       <li data-md>
        <p>Dash pattern based on dash pattern or original path.
Note light-gray region which is from inside dash part
(simply using clipping path does not yield proper result).</p>
       <li data-md>
        <p>Dash pattern based on center of offset path.
Light gray represents dash pattern based on center of inset path.</p>
      </ol>
     </figcaption>
    </figure>
   </div>
   <h4 class="heading settled" data-level="4.2.3" id="stroke-linecap"><span class="secno">4.2.3. </span><span class="content">Stroke End Shapes: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-linecap" id="ref-for-propdef-stroke-linecap">stroke-linecap</a> property</span><a class="self-link" href="#stroke-linecap"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-linecap">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-linecap">stroke-linecap</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">butt <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> round <span id="ref-for-comb-one①④">|</span> square 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>butt 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p><a class="property" data-link-type="propdesc" href="#propdef-stroke-linecap" id="ref-for-propdef-stroke-linecap①">stroke-linecap</a> specifies the shape to be used at the end of open subpaths
	(such as the segments of a dashed stroke,
	or an unclosed <code><a data-link-type="element" href="https://www.w3.org/TR/svg2/paths.html#elementdef-path" id="ref-for-elementdef-path①">path</a></code> element)
	when they are stroked.
	The possible values are:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linecap" data-dfn-type="value" data-export id="valdef-stroke-linecap-butt">butt</dfn> 
    <dd> The stroke for each subpath
			does not extend beyond its two endpoints.
			(A zero length subpath will therefore not have any stroke.) 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linecap" data-dfn-type="value" data-export id="valdef-stroke-linecap-round">round</dfn> 
    <dd> At each end of each subpath,
			the stroke is extended by a half circle
			with a radius equal to half the stroke width.
			(The stroke for a zero-length subpath
			is a full circle centered at the subpath’s point.) 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linecap" data-dfn-type="value" data-export id="valdef-stroke-linecap-square">square</dfn> 
    <dd>
      At the end of each subpath,
			the stroke is extended by a rectangle
			with the same width as the stroke width and whose length is half of the stroke width.
			(The stroke for a zero-length subpath
			is a square with side length equal to the stroke width,
			centered at the subpath’s point,
			and oriented such that two of its sides are parallel to the effective tangent at that subpath’s point.
			See <a href="#path-notes">§ 4.6 Computing the Shape of the Stroke</a> for details on how to determine the tangent at a zero-length subpath.) 
     <p class="issue" id="issue-f2ad6e96"><a class="self-link" href="#issue-f2ad6e96"></a> Adding a rectangle to the end of dashes on a curved outline looks bad.
			It should just extend the dash by <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width②">stroke-width</a>/2,
			following the outline.</p>
   </dl>
   <figure>
     <img src="images/linecap.svg"> 
    <figcaption> The three types of line caps. </figcaption>
   </figure>
   <p>See the definition of the <a data-link-type="dfn" href="#cap-shapes" id="ref-for-cap-shapes">cap shape</a> below
	for a more precise description of the shape a line cap will have.</p>
   <h4 class="heading settled" data-level="4.2.4" id="stroke-linejoin"><span class="secno">4.2.4. </span><span class="content">Stroke Corner Shapes: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin②">stroke-linejoin</a> property</span><a class="self-link" href="#stroke-linejoin"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-linejoin">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-linejoin">stroke-linejoin</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ crop <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> arcs <span id="ref-for-comb-one①⑥">|</span> miter ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any">||</a> [ bevel <span id="ref-for-comb-one①⑦">|</span> round <span id="ref-for-comb-one①⑧">|</span> fallback ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>miter 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p><a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin③">stroke-linejoin</a> specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
	It has two parts: <span class="css">[ crop | arcs | miter ]</span> specifies whether or not, and how, to extend the corner of the stroke; <span class="css">[ bevel | round | fallback ]</span> specifies how to render the "cap" of the corner when it’s limited in length by <a class="property" data-link-type="propdesc" href="#propdef-stroke-miterlimit" id="ref-for-propdef-stroke-miterlimit">stroke-miterlimit</a>.</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linejoin" data-dfn-type="value" data-export id="valdef-stroke-linejoin-crop">crop</dfn> 
    <dd>
      The stroke extends the minimal amount past the corner
			necessary to form a convex corner. 
     <p>This acts identically to <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-miter" id="ref-for-valdef-stroke-linejoin-miter">miter</a>,
			but forces <a class="property" data-link-type="propdesc" href="#propdef-stroke-miterlimit" id="ref-for-propdef-stroke-miterlimit①">stroke-miterlimit</a> to behave as if it had its minimum value of <span class="css">1</span>.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linejoin" data-dfn-type="value" data-export id="valdef-stroke-linejoin-miter">miter</dfn> 
    <dd> A sharp corner is used to join path segments.
			The corner is formed by extending the outer edges of the stroke at the tangents of the path segments
			until they intersect. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linejoin" data-dfn-type="value" data-export id="valdef-stroke-linejoin-arcs">arcs</dfn> 
    <dd> An arcs corner is used to join path segments.
			The arcs shape is formed by extending the outer edges of the stroke at the join point
			with arcs that have the same curvature as the outer edges at the join point. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linejoin" data-dfn-type="value" data-export id="valdef-stroke-linejoin-bevel">bevel</dfn> 
    <dd> The corner is cropped at the <a class="property" data-link-type="propdesc" href="#propdef-stroke-miterlimit" id="ref-for-propdef-stroke-miterlimit②">stroke-miterlimit</a> by the perpendicular to its <a data-link-type="dfn" href="#--corner-diagonal" id="ref-for---corner-diagonal">diagonal</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linejoin" data-dfn-type="value" data-export id="valdef-stroke-linejoin-round">round</dfn> 
    <dd> The corner is cropped as for <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-bevel" id="ref-for-valdef-stroke-linejoin-bevel">bevel</a>,
			and a filled arc tangent to the truncated stroke edges
			is appended to round the corner. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-linejoin" data-dfn-type="value" data-export id="valdef-stroke-linejoin-fallback">fallback</dfn> 
    <dd>
      When the <a class="property" data-link-type="propdesc" href="#propdef-stroke-miterlimit" id="ref-for-propdef-stroke-miterlimit③">stroke-miterlimit</a> is exceeded,
			this behaves as if <span class="css">crop bevel</span> were specified. 
     <p class="issue" id="issue-4eb049cf"><a class="self-link" href="#issue-4eb049cf"></a> Can we just remove <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-fallback" id="ref-for-valdef-stroke-linejoin-fallback">fallback</a>?
			It’s a stupid value,
			useful only because we didn’t have the clip-at-miterlimit behavior in SVG1.
			Question is if people are mostly just *accidentally* getting the bevel behavior right now,
			and would be okay with their joins extending up to the miterlimit
			and only getting the excess corners clipped,
			or if they actually wanted the discontinuous behavior currently specified. <a href="http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Csvg%3E%0A%20%20%3Cpath%20fill%3Dnone%20stroke%3Dblack%20stroke-width%3D10%20d%3D%22M%2010%2010%20h%20100%20l%20-100%2055%22%20%2F%3E%0A%20%20%3Cpath%20fill%3Dnone%20stroke%3Dblack%20stroke-width%3D10%20d%3D%22M%2010%2050%20h%20100%20l%20-100%2056deg%22%20%2F%3E"> The breakpoint is between 29 and 30 degrees. </a></p>
   </dl>
   <p>If <span class="css">[ crop | arcs | miter ]</span> is omitted,
	it defaults to <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-crop" id="ref-for-valdef-stroke-linejoin-crop">crop</a>.
	If <span class="css">[ bevel | round | fallback ]</span> is omitted,
	it defaults to <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-fallback" id="ref-for-valdef-stroke-linejoin-fallback①">fallback</a>.</p>
   <figure>
     <img src="images/linejoin-four.svg"> 
    <figcaption> Four types of line joins </figcaption>
   </figure>
   <figure>
    <svg style=" width: 600px; height: 180px;">
     <g transform="translate(0, 0)">
      <path d="M 10 50, h 100" fill="none" stroke="black" stroke-width="100"></path>
      <path d="M 110 50, l -50 100" fill="none" stroke="black" stroke-width="100"></path>
      <path d="M 10 50, h 100, l -100 200" fill="none" stroke="white" stroke-dasharray="5 3" stroke-width="1"></path>
      <path d="M 110 50, v -50, l 44.72 72.36, z" fill="hsla(0, 50%, 70%, 1)"></path>
     </g>
     <g transform="translate(200,0)">
      <path d="M 10 50, h 100" fill="none" stroke="black" stroke-width="100"></path>
      <path d="M 110 50, l -50 100" fill="none" stroke="black" stroke-width="100"></path>
      <path d="M 10 50, h 100, l -100 200" fill="none" stroke="white" stroke-dasharray="5 3" stroke-width="1"></path>
      <path d="M 110 50, v -50, a 50 50 0 0 1 44.72 72.36, z" fill="hsla(0, 50%, 70%, 1)"></path>
     </g>
     <g transform="translate(400, 0)">
      <path d="M 10 50, h 100" fill="none" stroke="black" stroke-width="100"></path>
      <path d="M 110 50, l -50 100" fill="none" stroke="black" stroke-width="100"></path>
      <path d="M 10 50, h 100, l -100 200" fill="none" stroke="white" stroke-dasharray="5 3" stroke-width="1"></path>
      <path d="M 110 50, v -50, h 80, L 154.72 72.36, z" fill="hsla(0, 50%, 70%, 1)"></path>
     </g>
    </svg>
    <figcaption> A more detailed look at precisely how each type of join is shaped.
			For each, the dashed white line is the path being stroked,
			and the black is the stroke itself,
			before applying the linejoin.
			The pink area is the additional stroke added at the corner
			for bevel, round, and miter linejoins. </figcaption>
   </figure>
   <h4 class="heading settled" data-level="4.2.5" id="stroke-miterlimit"><span class="secno">4.2.5. </span><span class="content">Stroke Corner Limits: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-miterlimit" id="ref-for-propdef-stroke-miterlimit④">stroke-miterlimit</a> property</span><a class="self-link" href="#stroke-miterlimit"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-miterlimit">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-miterlimit">stroke-miterlimit</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#number-value" id="ref-for-number-value①">&lt;number></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>4 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>a number 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p>This property specifies the maximum size of a <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-miter" id="ref-for-valdef-stroke-linejoin-miter①">miter</a> or <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-arcs" id="ref-for-valdef-stroke-linejoin-arcs">arcs</a> join
	when two stroke segments meet at a corner.
	(The apparent “size” of the join—<wbr>the distance between the inner and outer corner—<wbr>approaches infinity as the angle decreases.)</p>
   <p>This property has no effect when <a class="property" data-link-type="propdesc" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align⑦">stroke-align</a> is <a class="css" data-link-type="maybe" href="#valdef-stroke-align-inset" id="ref-for-valdef-stroke-align-inset③">inset</a>.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="stroke-miterlimit" data-dfn-type="value" data-export id="valdef-stroke-miterlimit-number"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#number-value" id="ref-for-number-value②">&lt;number></a><a class="self-link" href="#valdef-stroke-miterlimit-number"></a></dfn> 
    <dd>
      Specifies the limit on the join’s size
			as a ratio of its <dfn class="dfn-paneled" data-dfn-for="/" data-dfn-type="dfn" data-lt="corner diagonal" data-noexport id="--corner-diagonal">diagonal</dfn> to the <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width③">stroke-width</a>.
			Values less than 1 are invalid (and make the declaration <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-invalid" id="ref-for-css-invalid">invalid</a>). 
     <p>For a <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-miter" id="ref-for-valdef-stroke-linejoin-miter②">miter</a> linejoin,
			the length of the <a data-link-type="dfn" href="#--corner-diagonal" id="ref-for---corner-diagonal①">diagonal</a> is calculated
			from the angle between the two segments
			as <code><a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width④">stroke-width</a> / sin(θ/2)</code>.
			The linejoin is clipped perpendicular to
			the line bisecting the angle between the two path segments.</p>
     <p>For an <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-arcs" id="ref-for-valdef-stroke-linejoin-arcs①">arcs</a> linejoin,
			the length of the <a data-link-type="dfn" href="#--corner-diagonal" id="ref-for---corner-diagonal②">diagonal</a> is calculated
			along a circular arc that is tangent to
			the line bisecting the angle between the two segments
			at the point the two segments intersect
			and passes through the end point of the join.
			The linejoin is clipped perpendicular to this arc.</p>
   </dl>
   <p class="issue" id="issue-623ed3a5"><a class="self-link" href="#issue-623ed3a5"></a> Should we add angles?
	The miterlimit number has physical justification,
	but it’s difficult to understand without experimentation.</p>
   <h4 class="heading settled" data-level="4.2.6" id="stroke-break"><span class="secno">4.2.6. </span><span class="content">Fragmented Strokes: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-break" id="ref-for-propdef-stroke-break①">stroke-break</a> property</span><a class="self-link" href="#stroke-break"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-break">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-break">stroke-break</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">bounding-box <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> slice <span id="ref-for-comb-one②⓪">|</span> clone 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>bounding-box 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>? 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>No 
   </table>
   <p>This property specifies how the geometry of a <a data-link-type="dfn" href="https://www.w3.org/TR/css3-break/#fragment" id="ref-for-fragment①">fragmented</a> box is treated for <a data-link-type="dfn" href="#stroke" id="ref-for-stroke④">strokes</a>.</p>
   <p>Values have the following meanings: COPY FROM FRAGMENTATION</p>
   <h3 class="heading settled" data-level="4.3" id="stroke-dashes"><span class="secno">4.3. </span><span class="content">Stroke Dashing</span><a class="self-link" href="#stroke-dashes"></a></h3>
   <h4 class="heading settled" data-level="4.3.1" id="stroke-dasharray"><span class="secno">4.3.1. </span><span class="content">Stroke Dash Patterns: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-dasharray" id="ref-for-propdef-stroke-dasharray①">stroke-dasharray</a> property</span><a class="self-link" href="#stroke-dasharray"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-dasharray">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-dasharray">stroke-dasharray</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②">&lt;length-percentage></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑤">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>relative to the <a data-link-type="dfn" href="#scaled-viewport-size" id="ref-for-scaled-viewport-size①">scaled viewport size</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as repeated list of length, percentage or calc 
   </table>
   <p>This property controls the pattern of dashes and gaps used to stroke paths.</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-dasharray" data-dfn-type="value" data-export id="valdef-stroke-dasharray-none">none</dfn> 
    <dd> No dashing: the stroke is drawn continuously. 
    <dt><dfn class="css" data-dfn-for="stroke-dasharray" data-dfn-type="value" data-export id="valdef-stroke-dasharray-length-percentage"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③">&lt;length-percentage></a>+#<a class="self-link" href="#valdef-stroke-dasharray-length-percentage"></a></dfn> 
    <dd>
      Specifies a dashing pattern to use.
			Each <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage④">&lt;length-percentage></a> value represents the length of the next dash or gap
			(beginning with the first dash and alternating from there)
			of the stroke.
			The pattern repeats over the length of the stroke.
			(If the number of values is odd,
			the pattern behaves as if it was duplicated to yield an even number of values.)
			The dashing pattern is reset and begins anew at the start of each subpath. 
     <p>Negative values are invalid.
			If all values are zero, it is treated as <a class="css" data-link-type="maybe" href="#valdef-stroke-dasharray-none" id="ref-for-valdef-stroke-dasharray-none">none</a>.</p>
   </dl>
   <p class="issue" id="issue-450f986b"><a class="self-link" href="#issue-450f986b"></a> SVG allows comma separation. Do we need to allow this in CSS for back-compat? (Please say no.)</p>
   <p class="issue" id="issue-2ee1265c"><a class="self-link" href="#issue-2ee1265c"></a> Need a way to specify dash lengths relative to the width of the stroke.
	(For instance, to do square dashes.)</p>
   <p class="issue" id="issue-144df544"><a class="self-link" href="#issue-144df544"></a> Need a way to specify dash lengths relative to the length of the path.
	(For instance, to do the "self-drawing SVG" thing without script.)</p>
   <figure>
     <img src="images/dashes.svg"> 
    <figcaption> A dashed stroke.
			The dashing pattern is <span class="css">20 10</span>.
			The red line shows the actual path that is stroked. </figcaption>
   </figure>
   <h4 class="heading settled" data-level="4.3.2" id="stroke-dashoffset"><span class="secno">4.3.2. </span><span class="content">Stroke Dash Start Position: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-dashoffset" id="ref-for-propdef-stroke-dashoffset">stroke-dashoffset</a> property</span><a class="self-link" href="#stroke-dashoffset"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-dashoffset">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-dashoffset">stroke-dashoffset</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑤">&lt;length-percentage></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>relative to the <a data-link-type="dfn" href="#scaled-viewport-size" id="ref-for-scaled-viewport-size②">scaled viewport size</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as repeated list of integers 
   </table>
   <p>This property specifies the distance into the repeated dash pattern to start dashing at the beginning of the path.
	Values can be negative.</p>
   <figure>
     <img src="images/dashoffset.svg"> 
    <figcaption> A dashed stroke with a non-zero dash offset.
			The dashing pattern is <span class="css">20 10</span> and the dash offset is <span class="css">15</span>.
			The red line shows the actual path that is stroked. </figcaption>
   </figure>
   <p>See <a href="#algo-dash-positions">§ 4.6.3 Dash Positions</a> for a more precise description of positions along a path that dashes will be placed.</p>
   <h4 class="heading settled" data-level="4.3.3" id="corner-control"><span class="secno">4.3.3. </span><span class="content">Corner Control: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-corner" id="ref-for-propdef-stroke-dash-corner">stroke-dash-corner</a> and <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-justify" id="ref-for-propdef-stroke-dash-justify">stroke-dash-justify</a> properties</span><a class="self-link" href="#corner-control"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-dash-corner">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-dash-corner">stroke-dash-corner</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified value, with lengths made absolute 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>yes, if <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#length-value" id="ref-for-length-value①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-corner" id="ref-for-propdef-stroke-dash-corner①">stroke-dash-corner</a> property controls
	whether a dash is always painted at the vertices of a stroked shape.
	The points at which a dash corner is painted include
	the start and end points of every segment within the shape’s <a data-link-type="dfn" href="https://www.w3.org/TR/svg2/paths.html#TermEquivalentPath" id="ref-for-TermEquivalentPath">equivalent path</a>.</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="stroke-dash-corner" data-dfn-type="value" data-export id="valdef-stroke-dash-corner-none">none</dfn>
    <dd data-md>
     <p>This property has no special effect on dashing:
the dashes are positioned/sized continuously along the path.</p>
    <dt data-md><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#length-value" id="ref-for-length-value②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>
    <dd data-md>
     <p>A dash of the given <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#length-value" id="ref-for-length-value③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> must be painted at each vertex of the shape.
For an open shape,
the first corner dash is positioned so that it begins at the start of the path,
and the last corner dash so that it ends at the end of the path.
The other corner dashes of an open shape,
and all corner dashes of a closed shape,
are positioned so that they are centered on their vertex.</p>
   </dl>
   <p class="issue" id="issue-0f052988"><a class="self-link" href="#issue-0f052988"></a> Should the corner dash at the first and last vertex of an open shape
	be half the length of the others?
	Should this be author controllable?</p>
   <p class="issue" id="issue-ae05e8d7"><a class="self-link" href="#issue-ae05e8d7"></a> Should there be a way to specify a padding,
	so that any dash pattern between the corner dashes
	does not not run up against them?</p>
   <p class="issue" id="issue-41745b7c"><a class="self-link" href="#issue-41745b7c"></a> The corner needs to take over the role of the first dash in the dash pattern,
	so the "interior" of each segment starts and ends with a gap.
	Automatically skip the first dash in the pattern in each segment?</p>
   <p class="issue" id="issue-5cc7adcf"><a class="self-link" href="#issue-5cc7adcf"></a> Keyword to use the length of the first dash as the corner.</p>
   <p>When <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-corner" id="ref-for-propdef-stroke-dash-corner②">stroke-dash-corner</a> is not <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-corner-none" id="ref-for-valdef-stroke-dash-corner-none">none</a>,
	dash patterns
	(as specified by <span class="css">stroke-dasharray</span>)
	are repeated separately on each path segment,
	in the space between the segment’s corner dashes.</p>
   <p class="issue" id="issue-fda43f2e"><a class="self-link" href="#issue-fda43f2e"></a> Need to define what happens when corner dashes would overlap.</p>
   <p class="issue" id="issue-1a500326"><a class="self-link" href="#issue-1a500326"></a> Should we auto-trigger justification when this property is active?
	Without it, you’ll get some dumb-looking results by default.</p>
   <figure>
     <img alt="Image showing a rectangle at each corner and short dashes in between." src="images/dashcorner.svg"> 
    <figcaption> A rectangle painted with a dashed stroke and with corner dashes,
			set with <a class="css" data-link-type="propdesc" href="#propdef-stroke-dasharray" id="ref-for-propdef-stroke-dasharray②">stroke-dasharray: 0 8px; stroke-dash-corner: 32px;</a>. </figcaption>
   </figure>
   <table class="def propdef" data-link-for-hint="stroke-dash-justify">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-dash-justify">stroke-dash-justify</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> [ stretch <span id="ref-for-comb-one②④">|</span> compress ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> [ dashes <span id="ref-for-comb-any②">||</span> gaps ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified value, with lengths made absolute 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-justify" id="ref-for-propdef-stroke-dash-justify①">stroke-dash-justify</a> property specifies
	whether and how a stroke’s dash pattern will be adjusted
	so that it is repeated a whole number of times
	along each of an element’s subpaths.</p>
   <dl>
    <dt data-md><dfn class="css" data-dfn-for="stroke-dash-justify" data-dfn-type="value" data-export id="valdef-stroke-dash-justify-none">none<a class="self-link" href="#valdef-stroke-dash-justify-none"></a></dfn>
    <dd data-md>
     <p>No adjustment of the dash pattern is made:
it’s clipped at the end of the subpath
with however much progress it made to that point.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="stroke-dash-justify" data-dfn-type="value" data-export id="valdef-stroke-dash-justify-stretch">stretch</dfn>
    <dd data-md>
     <p>Indicates that when the dash pattern does not fit into a subpath a whole number times,
the dashes or gaps (or both) will be lengthened so that it does.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="stroke-dash-justify" data-dfn-type="value" data-export id="valdef-stroke-dash-justify-compress">compress</dfn>
    <dd data-md>
     <p>Indicates that when the dash pattern does not fit into a subpath a whole number times,
the dashes or gaps (or both) will be shortened so that it does.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="stroke-dash-justify" data-dfn-type="value" data-export id="valdef-stroke-dash-justify-dashes">dashes</dfn>
    <dd data-md>
     <p>Indicates that when a dash pattern is to be stretched or compressed,
the length of the dashes will be adjusted.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="stroke-dash-justify" data-dfn-type="value" data-export id="valdef-stroke-dash-justify-gaps">gaps</dfn>
    <dd data-md>
     <p>Indicates that when a dash pattern is to be stretched or compressed,
the length of the gaps will be adjusted.</p>
   </dl>
   <p>If neither <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-justify-stretch" id="ref-for-valdef-stroke-dash-justify-stretch">stretch</a> nor <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-justify-compress" id="ref-for-valdef-stroke-dash-justify-compress">compress</a> is specified,
	it defaults to whichever would result in less adjustment.</p>
   <p>If neither <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-justify-dashes" id="ref-for-valdef-stroke-dash-justify-dashes">dashes</a> nor <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-justify-gaps" id="ref-for-valdef-stroke-dash-justify-gaps">gaps</a> is specified,
	it defaults to ???.</p>
   <p class="issue" id="issue-2eae2333"><a class="self-link" href="#issue-2eae2333"></a> Default should probably be to adjust the gaps only.</p>
   <p>The target length that a dash pattern will be adjusted to
	depends on the value of the <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-corner" id="ref-for-propdef-stroke-dash-corner③">stroke-dash-corner</a> property:</p>
   <ul>
    <li data-md>
     <p>If <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-corner" id="ref-for-propdef-stroke-dash-corner④">stroke-dash-corner</a> is <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-corner-none" id="ref-for-valdef-stroke-dash-corner-none①">none</a>,
then the dash pattern will be adjusted
to fit within the length of the subpath a whole number of times.</p>
    <li data-md>
     <p>If <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-corner" id="ref-for-propdef-stroke-dash-corner⑤">stroke-dash-corner</a> has any other value,
including a zero length,
then the dash pattern will be adjusted differently for each path segment of the subpath
such that it fits between the two corner dashes at the ends of the segment
a whole number of times.</p>
   </ul>
   <p>The adjustment of dash and gap length in a dash pattern is done by scaling the lengths by a factor,
	which is the number closest to 1
	that will result in the dash pattern fitting in the target length
	a whole number of times.
	If <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-justify-stretch" id="ref-for-valdef-stroke-dash-justify-stretch①">stretch</a> is used,
	the factor is a number between 1 and 2,
	while if <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-justify-compress" id="ref-for-valdef-stroke-dash-justify-compress①">compress</a> is used,
	the factor is a number between 0 and 1.</p>
   <p>If <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-justify-stretch" id="ref-for-valdef-stroke-dash-justify-stretch②">stretch</a> is specified,
	but the dash pattern is longer than the target length,
	no adjustment is performed.</p>
   <p class="issue" id="issue-08b79da6"><a class="self-link" href="#issue-08b79da6"></a> Should it center the segment when it’s too long?</p>
   <p>If <a class="css" data-link-type="maybe" href="#valdef-stroke-dash-justify-compress" id="ref-for-valdef-stroke-dash-justify-compress②">compress</a> is specified,
	but the adjustable parts of the dash pattern
	can’t be compressed enough to fit the dash pattern into the target length,
	the compressible parts must be set to zero.</p>
   <p class="issue" id="issue-e270edfd"><a class="self-link" href="#issue-e270edfd"></a> Do we want to allow control of whether the stroke ends with a dash or with a gap?
	For a closed path,
	you probably want a gap at the end,
	while for an open path,
	a dash at the end is probably better.
	Maybe omit control for this,
	and just do it automatically based on whether the path is closed?</p>
   <figure>
     <img src="images/dashadjust.svg"> 
    <figcaption> The same dash stroke used on three different paths,
			adjusted to fit a whole number of times on each. </figcaption>
   </figure>
   <h3 class="heading settled" data-level="4.4" id="stroke-paint"><span class="secno">4.4. </span><span class="content">Stroke Paint</span><a class="self-link" href="#stroke-paint"></a></h3>
   <h4 class="heading settled" data-level="4.4.1" id="stroke-color"><span class="secno">4.4.1. </span><span class="content">Stroke Color: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-color" id="ref-for-propdef-stroke-color⑤">stroke-color</a> property</span><a class="self-link" href="#stroke-color"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-color">stroke-color</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-color/#valuea-def-color" id="ref-for-valuea-def-color②" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑥">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>transparent 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the computed color 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as color 
   </table>
   <p>This property sets the stroke colors of an element.
	Like <a class="property" data-link-type="propdesc" href="#propdef-stroke-image" id="ref-for-propdef-stroke-image③">stroke-image</a>,
	stroke colors are drawn with the first specified one on top
	(closest to the user)
	and each subsequent color behind the previous one.</p>
   <p>Stroke colors are only drawn if the <a class="property" data-link-type="propdesc" href="#propdef-stroke-image" id="ref-for-propdef-stroke-image④">stroke-image</a> on the corresponding layer
	is <span class="css">none</span> or an <a data-link-type="dfn" href="https://www.w3.org/TR/css4-images/#invalid-image" id="ref-for-invalid-image③">invalid image</a>.
	(In other words,
	each layer draws <em>either</em> an image or a color,
	with images winning if both are specified.)</p>
   <p class="note" role="note"><span>Note:</span> This is required to match the legacy behavior of SVG’s <a class="property" data-link-type="propdesc" href="#propdef-stroke" id="ref-for-propdef-stroke②">stroke</a> property,
	which built in a "fallback color" to the single-layer image syntax.
	In CSS this is better achieved with the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css4-images/#funcdef-image" id="ref-for-funcdef-image①">image()</a> function,
	which makes fallback explicit.</p>
   <h4 class="heading settled" data-level="4.4.2" id="stroke-image"><span class="secno">4.4.2. </span><span class="content">Stroke Image Sources: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-image" id="ref-for-propdef-stroke-image⑤">stroke-image</a> property</span><a class="self-link" href="#stroke-image"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-image">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-image">stroke-image</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-paint" id="ref-for-typedef-paint③" title="Expands to: none">&lt;paint></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑦">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, with any <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-images/#image-type" id="ref-for-image-type③">&lt;image></a> computed 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as repeatable list of images 
   </table>
   <p>This property sets the stroke images of an element.
	Images are drawn with the first specified one on top
	(closest to the user)
	and each subsequent image behind the previous one.
	Values are interpreted identically to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-image" id="ref-for-propdef-background-image①">background-image</a>, mutatis mutandi.</p>
   <h4 class="heading settled" data-level="4.4.3" id="stroke-origin"><span class="secno">4.4.3. </span><span class="content">Stroke Positioning Area: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-origin" id="ref-for-propdef-stroke-origin">stroke-origin</a> property</span><a class="self-link" href="#stroke-origin"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-origin">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-origin">stroke-origin</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">match-parent <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> fill-box <span id="ref-for-comb-one②⑥">|</span> stroke-box <span id="ref-for-comb-one②⑦">|</span> content-box <span id="ref-for-comb-one②⑧">|</span> padding-box <span id="ref-for-comb-one②⑨">|</span> border-box 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>match-parent 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p>This property specifies the coordinate system of the <a data-link-type="dfn" href="#stroke" id="ref-for-stroke⑤">stroke</a>,
	setting the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="stroke-positioning-area">stroke positioning area</dfn>.
	Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-origin" data-dfn-type="value" data-export id="valdef-stroke-origin-match-parent">match-parent</dfn> 
    <dd> Use the same <a data-link-type="dfn" href="#stroke-positioning-area" id="ref-for-stroke-positioning-area">stroke positioning area</a> as the parent.
			If it has no parent, use the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block①">initial containing block</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-origin" data-dfn-type="value" data-export id="valdef-stroke-origin-content-box">content-box</dfn> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-origin" data-dfn-type="value" data-export id="valdef-stroke-origin-padding-box">padding-box</dfn> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-origin" data-dfn-type="value" data-export id="valdef-stroke-origin-border-box">border-box</dfn> 
    <dd> Use the box’s own content-box/padding-box/border-box as the <a data-link-type="dfn" href="#stroke-positioning-area" id="ref-for-stroke-positioning-area①">stroke positioning area</a>.
			For <a data-link-type="dfn">SVG shapes</a>, <a class="css" data-link-type="maybe" href="#valdef-stroke-origin-content-box" id="ref-for-valdef-stroke-origin-content-box">content-box</a> and <a class="css" data-link-type="maybe" href="#valdef-stroke-origin-padding-box" id="ref-for-valdef-stroke-origin-padding-box">padding-box</a> are treated as <a class="css" data-link-type="maybe" href="#valdef-stroke-origin-fill-box" id="ref-for-valdef-stroke-origin-fill-box">fill-box</a>,
			while <a class="css" data-link-type="maybe" href="#valdef-stroke-origin-border-box" id="ref-for-valdef-stroke-origin-border-box">border-box</a> is treated as <a class="css" data-link-type="maybe" href="#valdef-stroke-origin-stroke-box" id="ref-for-valdef-stroke-origin-stroke-box">stroke-box</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-origin" data-dfn-type="value" data-export id="valdef-stroke-origin-fill-box">fill-box</dfn> 
    <dd> For <a data-link-type="dfn">SVG shapes</a> or SVG text,
			use the <a data-link-type="dfn" href="https://www.w3.org/TR/svg2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox①">object bounding box</a> of the element.
			For CSS boxes,
			use the bounding box of the text glyph outlines
			of the element and all in-flow or floated descendants. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="stroke-origin" data-dfn-type="value" data-export id="valdef-stroke-origin-stroke-box">stroke-box</dfn> 
    <dd> For <a data-link-type="dfn">SVG shapes</a> or SVG text,
			use the <a data-link-type="dfn" href="https://www.w3.org/TR/svg2/coords.html#TermStrokeBoundingBox" id="ref-for-TermStrokeBoundingBox①">stroke bounding box</a> of the element.
			For CSS boxes,
			use the bounding box of the text glyph stroke outlines
			of the element and all in-flow or floated descendants. 
   </dl>
   <p>The SVG UA style sheet is amended to include the following rules:</p>
<pre class="lang-css highlight"><c- f>svg:svg </c-><c- p>{</c->
  <c- k>stroke-origin</c-><c- p>:</c-> content-box<c- p>;</c->
<c- p>}</c->
</pre>
   <p>The <dfn data-dfn-type="dfn" data-export id="stroke-painting-area">stroke painting area<a class="self-link" href="#stroke-painting-area"></a></dfn> is infinite in size.
	When painting,
	the stroke color/images are intersected with the glyph strokes of the affected text,
	or the stroke geometry of the affected <a data-link-type="dfn">SVG shape</a>.</p>
   <p class="issue" id="issue-8b7a4ffb①"><a class="self-link" href="#issue-8b7a4ffb①"></a> SVG paint servers carry around their own originator information in *Units attributes,
	but maybe SVGWG can add a new value that makes them pay attention to the CSS originator.
	Alternately, we can add an <span class="css">auto</span> initial value here,
	which defers to the paint server’s information
	if you’re referring to one,
	and otherwise is <a class="css" data-link-type="maybe" href="#valdef-stroke-origin-match-parent" id="ref-for-valdef-stroke-origin-match-parent">match-parent</a>.</p>
   <h4 class="heading settled" data-level="4.4.4" id="stroke-position"><span class="secno">4.4.4. </span><span class="content">Positioning Stroke Images: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-position" id="ref-for-propdef-stroke-position">stroke-position</a> property</span><a class="self-link" href="#stroke-position"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-position">stroke-position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-position" id="ref-for-typedef-position①">&lt;position></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑧">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0% 0% 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as <a data-link-type="dfn" href="https://www.w3.org/TR/web-animations-1/#repeatable-list" id="ref-for-repeatable-list②">repeatable list</a> of <a data-link-type="dfn">simple list</a> of length, percentage, or calc 
   </table>
   <p>If stroke images have been specified,
	this property specifies their initial position
	(after any resizing)
	within their corresponding <a data-link-type="dfn" href="#stroke-positioning-area" id="ref-for-stroke-positioning-area②">stroke positioning area</a>.
	Values are interpreted identically to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-position" id="ref-for-propdef-background-position①">background-position</a>,
	mutatis mutandi.</p>
   <h4 class="heading settled" data-level="4.4.5" id="stroke-size"><span class="secno">4.4.5. </span><span class="content">Sizing Stroke Images: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-size" id="ref-for-propdef-stroke-size">stroke-size</a> property</span><a class="self-link" href="#stroke-size"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-size">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-size">stroke-size</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-background/#typedef-bg-size" id="ref-for-typedef-bg-size①">&lt;bg-size></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑨">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, but with lengths made absolute and omitted <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-background/#valdef-background-size-auto" id="ref-for-valdef-background-size-auto①">auto</a> keywords filled in 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as <a data-link-type="dfn" href="https://www.w3.org/TR/web-animations-1/#repeatable-list" id="ref-for-repeatable-list③">repeatable list</a> of <a data-link-type="dfn">simple list</a> of length, percentage, or calc 
   </table>
   <p>Specifies the size of the stroke images.
	Values are interpreted identically to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-size" id="ref-for-propdef-background-size①">background-size</a>,
	mutatis mutandi.</p>
   <h4 class="heading settled" data-level="4.4.6" id="stroke-repeat"><span class="secno">4.4.6. </span><span class="content">Tiling Stroke Images: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-repeat" id="ref-for-propdef-stroke-repeat">stroke-repeat</a> property</span><a class="self-link" href="#stroke-repeat"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-repeat">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-repeat">stroke-repeat</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-background/#typedef-repeat-style" id="ref-for-typedef-repeat-style①">&lt;repeat-style></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma①⓪">#</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>repeat 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>A list, each item consisting of: two keywords, one per dimension 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
   </table>
   <p>Specifies how stroke fill images are tiled after they have been sized and positioned.
	Values are interpreted identically to <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-repeat" id="ref-for-propdef-background-repeat①">background-repeat</a>,
	mutatis mutandi.</p>
   <h4 class="heading settled" data-level="4.4.7" id="stroke-shorthand"><span class="secno">4.4.7. </span><span class="content">Stroke Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-stroke" id="ref-for-propdef-stroke③">stroke</a> property</span><a class="self-link" href="#stroke-shorthand"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke">stroke</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background" id="ref-for-propdef-background③">&lt;'background'></a> with modifications 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>See individual properties 
     <tr>
      <th>Applies to:
      <td>See individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>See individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>See individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>See individual properties 
   </table>
   <p>This property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property①">shorthand</a> that sets all of the stroke painting properties—<wbr><a class="property" data-link-type="propdesc" href="#propdef-stroke-color" id="ref-for-propdef-stroke-color⑥">stroke-color</a>, <a class="property" data-link-type="propdesc" href="#propdef-stroke-image" id="ref-for-propdef-stroke-image⑥">stroke-image</a>, <a class="property" data-link-type="propdesc" href="#propdef-stroke-origin" id="ref-for-propdef-stroke-origin①">stroke-origin</a>, <a class="property" data-link-type="propdesc" href="#propdef-stroke-position" id="ref-for-propdef-stroke-position①">stroke-position</a>, <a class="property" data-link-type="propdesc" href="#propdef-stroke-size" id="ref-for-propdef-stroke-size①">stroke-size</a>,
	and <a class="property" data-link-type="propdesc" href="#propdef-stroke-repeat" id="ref-for-propdef-stroke-repeat①">stroke-repeat</a>—<wbr>in one declaration.
	Omitted values are set to their initial value,
	except that an omitted <span class="property" id="ref-for-propdef-stroke-color⑦">stroke-color</span> is set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent③">transparent</a>,
	and an omitted <span class="property" id="ref-for-propdef-stroke-origin②">stroke-origin</span> is set to <a class="css" data-link-type="maybe" href="#valdef-stroke-origin-stroke-box" id="ref-for-valdef-stroke-origin-stroke-box①">stroke-box</a>.</p>
   <h3 class="heading settled" data-level="4.5" id="stroke-filter"><span class="secno">4.5. </span><span class="content">Stroke Transparency</span><a class="self-link" href="#stroke-filter"></a></h3>
   <h4 class="heading settled" data-level="4.5.1" id="stroke-opacity"><span class="secno">4.5.1. </span><span class="content">Stroke Opacity: the <a class="property" data-link-type="propdesc" href="#propdef-stroke-opacity" id="ref-for-propdef-stroke-opacity">stroke-opacity</a> property</span><a class="self-link" href="#stroke-opacity"></a></h4>
   <table class="def propdef" data-link-for-hint="stroke-opacity">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-stroke-opacity">stroke-opacity</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity②">&lt;'opacity'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>1 
     <tr>
      <th>Applies to:
      <td>inline boxes and <a data-link-type="dfn">SVG shapes</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the specified value converted to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-values/#number-value" id="ref-for-number-value③">&lt;number></a>, clamped to the range [0,1] 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th>Media:
      <td>visual 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>as number 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-stroke-opacity" id="ref-for-propdef-stroke-opacity①">stroke-opacity</a> property specifies the opacity of the painting operation
	used to stroke the current object.
	As with <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity③">opacity</a>,
	a value of <span class="css">0</span> or <span class="css">0%</span> means fully transparent,
	and a value of <span class="css">1</span> or <span class="css">100%</span> means fully opaque.</p>
   <h3 class="heading settled" data-level="4.6" id="path-notes"><span class="secno">4.6. </span><span class="content">Computing the Shape of the Stroke</span><a class="self-link" href="#path-notes"></a></h3>
   <h4 class="heading settled" data-level="4.6.1" id="stroke-paths"><span class="secno">4.6.1. </span><span class="content">Stroke Paths</span><a class="self-link" href="#stroke-paths"></a></h4>
   <p>In all cases,
	all stroking properties which are affected by directionality,
	such as those having to do with dash patterns,
	must be rendered such that the stroke operation
	starts at the same point at which the graphics element starts.
	In particular, for <code><a data-link-type="element" href="https://www.w3.org/TR/svg2/paths.html#elementdef-path" id="ref-for-elementdef-path②">path</a></code> elements,
	the start of the path is the first point of the initial “moveto” command.</p>
   <p>For stroking properties such as dash patterns
	whose computations are dependent on progress along the outline of the graphics element,
	distance calculations are required to utilize
	the SVG user agent’s standard <a href="https://svgwg.org/svg2-draft/paths.html#DistanceAlongAPath">Distance along a path algorithms</a>.</p>
   <p>When stroking is performed using a complex paint server,
	such as a gradient or a <code><a data-link-type="element" href="https://www.w3.org/TR/svg2/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern">pattern</a></code>,
	the stroke operation must be identical to the result that would have occurred
	if the geometric shape defined by the geometry of the current graphics element
	and its associated stroking properties
	were converted to an equivalent <code><a data-link-type="element" href="https://www.w3.org/TR/svg2/paths.html#elementdef-path" id="ref-for-elementdef-path③">path</a></code> element
	and then filled using the given paint server.</p>
   <p>A subpath consisting of a single “moveto” shall not be stroked.
	Any zero length subpath shall not be stroked
	if the <a class="property" data-link-type="propdesc" href="#propdef-stroke-linecap" id="ref-for-propdef-stroke-linecap②">stroke-linecap</a> property has a value of <a class="css" data-link-type="maybe" href="#valdef-stroke-linecap-butt" id="ref-for-valdef-stroke-linecap-butt">butt</a> but shall be stroked if the <span class="property" id="ref-for-propdef-stroke-linecap③">stroke-linecap</span> property has a value of <a class="css" data-link-type="maybe" href="#valdef-stroke-linecap-round" id="ref-for-valdef-stroke-linecap-round">round</a> or <a class="css" data-link-type="maybe" href="#valdef-stroke-linecap-square" id="ref-for-valdef-stroke-linecap-square">square</a>,
	producing respectively a circle or a square centered at the given point.
	Examples of zero-length subpaths include <code>'M 10,10 L 10,10'</code>, <code>'M 20,20 h 0'</code>, <code>'M 30,30 z'</code>,
	and <code>'M 40,40 c 0,0 0,0 0,0'</code>.</p>
   <p class="issue" id="issue-107516c1"><a class="self-link" href="#issue-107516c1"></a> This should be redundant with the stroke shape computation requirements below.
	In this section, we should phrase the requirements descriptively rather than normatively.</p>
   <h4 class="heading settled" data-level="4.6.2" id="algo-stroke-shape"><span class="secno">4.6.2. </span><span class="content">Stroke Shape</span><a class="self-link" href="#algo-stroke-shape"></a></h4>
   <div class="algorithm" data-algorithm="stroke shape">
     The <dfn data-dfn-type="dfn" data-export id="stroke-shape">stroke shape<a class="self-link" href="#stroke-shape"></a></dfn> of an element is the shape that is filled by the <a class="property" data-link-type="propdesc" href="#propdef-stroke" id="ref-for-propdef-stroke④">stroke</a> property.
		The following algorithm describes what the stroke shape of text, a <code><a data-link-type="element" href="https://www.w3.org/TR/svg2/paths.html#elementdef-path" id="ref-for-elementdef-path④">path</a></code>, or basic shape is,
		taking into account the stroking properties above: 
    <ol>
     <li data-md>
      <p>Let <var>shape</var> be an empty shape.</p>
     <li data-md>
      <p>Let <var>path</var> be the <a data-link-type="dfn" href="https://www.w3.org/TR/svg2/paths.html#TermEquivalentPath" id="ref-for-TermEquivalentPath①">equivalent path</a> of the element.</p>
     <li data-md>
      <p>For each <var>subpath</var> of <var>path</var>:</p>
      <ol>
       <li data-md>
        <p>Let <var>positions</var> be the <a data-link-type="dfn" href="#dash-positions" id="ref-for-dash-positions">dash positions</a> for the <var>subpath</var>.</p>
       <li data-md>
        <p>For each pair (<var>start</var>, <var>end</var>) in <var>positions</var>:</p>
        <ol>
         <li data-md>
          <p>Let <var>dash</var> be the shape that includes,
for all distances between <var>start</var> and <var>end</var> along the <var>subpath</var>,
all points that lie on the line perpendicular to the <var>subpath</var> at that distance
and which are within distance stroke-width
of the point on the <var>subpath</var> at that position.</p>
         <li data-md>
          <p>Set <var>dash</var> to be the union of <var>dash</var> and the starting <a data-link-type="dfn" href="#cap-shapes" id="ref-for-cap-shapes①">cap shape</a> for the subpath at position <var>start</var>.</p>
         <li data-md>
          <p>Set <var>dash</var> to be the union of <var>dash</var> and the ending <a data-link-type="dfn" href="#cap-shapes" id="ref-for-cap-shapes②">cap shape</a> for the subpath at position <var>end</var>.</p>
         <li data-md>
          <p>Let <var>index</var> and <var>last</var> be the indexes of the path segments in the subpath at distance start and end along the subpath.</p>
          <p class="note" role="note"><span>Note:</span> It does not matter whether any zero length segments are included when choosing index and last.</p>
         <li data-md>
          <p>While <var>index</var> &lt; <var>last</var>:</p>
          <ol>
           <li data-md>
            <p>Set <var>dash</var> to be the union of <var>dash</var> and the <a data-link-type="dfn" href="#line-join-shape" id="ref-for-line-join-shape">line join shape</a> for the subpath at segment index <var>index</var>.</p>
           <li data-md>
            <p>Set <var>index</var> to index + 1.</p>
          </ol>
         <li data-md>
          <p>Set <var>shape</var> to be the union of <var>shape</var> and <var>dash</var>.</p>
        </ol>
      </ol>
     <li data-md>
      <p>Return <var>shape</var>.</p>
    </ol>
   </div>
   <h4 class="heading settled" data-level="4.6.3" id="algo-dash-positions"><span class="secno">4.6.3. </span><span class="content">Dash Positions</span><a class="self-link" href="#algo-dash-positions"></a></h4>
   <p class="issue" id="issue-2553a54b"><a class="self-link" href="#issue-2553a54b"></a> This section doesn’t handle <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-corner" id="ref-for-propdef-stroke-dash-corner⑥">stroke-dash-corner</a> and <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-justify" id="ref-for-propdef-stroke-dash-justify②">stroke-dash-justify</a> yet.</p>
   <div class="algorithm" data-algorithm="dash positions">
     The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="dash-positions">dash positions</dfn> for a given subpath
		of the equivalent path of a <code><a data-link-type="element" href="https://www.w3.org/TR/svg2/paths.html#elementdef-path" id="ref-for-elementdef-path⑤">path</a></code> or basic shape
		is a sequence of pairs of values,
		which represent the starting and ending distance along the subpath
		for each of the dashes that form the subpath’s stroke.
		It is determined as follows: 
    <ol>
     <li data-md>
      <p>Let <var>pathlength</var> be the length of the subpath.</p>
     <li data-md>
      <p>Let <var>dashes</var> be the list of values of <a class="property" data-link-type="propdesc" href="#propdef-stroke-dasharray" id="ref-for-propdef-stroke-dasharray③">stroke-dasharray</a> on the element,
repeated if necessary so that it has an even number of elements;
if the property has the value none,
then the list has a single value <span class="css">0</span>.</p>
     <li data-md>
      <p>Let <var>count</var> be the number of values in <var>dashes</var>.</p>
     <li data-md>
      <p>Let <var>sum</var> be the sum of the values in <var>dashes</var>.</p>
     <li data-md>
      <p>If <var>sum</var> = 0, then return a sequence with the single pair (0, <var>pathlength</var>).</p>
     <li data-md>
      <p>Let <var>positions</var> be an empty sequence.</p>
     <li data-md>
      <p>Let <var>offset</var> be the value of the <a class="property" data-link-type="propdesc" href="#propdef-stroke-dashoffset" id="ref-for-propdef-stroke-dashoffset①">stroke-dashoffset</a> property on the element.</p>
     <li data-md>
      <p>If <var>offset</var> is negative, then set <var>offset</var> to <code><var>sum</var> − abs(<var>offset</var>)</code>.</p>
     <li data-md>
      <p>Set <var>offset</var> to <code><var>offset</var> mod <var>sum</var></code>.</p>
     <li data-md>
      <p>Let <var>index</var> be the smallest integer such that <code>sum(<var>dashes</var><sub>i</sub>, 0 ≤ i ≤ <var>index</var>) ≥ <var>offset</var></code>.</p>
     <li data-md>
      <p>Let <var>dashlength</var> be <code>min(sum(<var>dashes</var><sub>i</sub>, 0 ≤ i ≤ <var>index</var>) − <var>offset</var>, <var>pathlength</var>)</code>.</p>
     <li data-md>
      <p>If <code><var>index</var> mod 2 = 0</code>, then append to <var>positions</var> the pair (0, <var>dashlength</var>).</p>
     <li data-md>
      <p>Let <var>position</var> be <var>dashlength</var>.</p>
     <li data-md>
      <p>While <var>position</var> &lt; <var>pathlength</var>:</p>
      <ol>
       <li data-md>
        <p>Set <var>index</var> to <code>(<var>index</var> + 1) mod <var>count</var></code>.</p>
       <li data-md>
        <p>Let <var>dashlength</var> be <code>min(<var>dashes</var><sub><var>index</var></sub>, <var>pathlength</var> − <var>position</var>)</code>.</p>
       <li data-md>
        <p>If <var>index</var> mod 2 = 0, then append to <var>positions</var> the pair (<var>position</var>, <var>position</var> + <var>dashlength</var>).</p>
       <li data-md>
        <p>Set <var>position</var> to <code><var>position</var> + <var>dashlength</var></code>.</p>
      </ol>
     <li data-md>
      <p>Return <var>positions</var>.</p>
    </ol>
   </div>
   <h4 class="heading settled" data-level="4.6.4" id="algo-cap-shapes"><span class="secno">4.6.4. </span><span class="content">Cap Shapes</span><a class="self-link" href="#algo-cap-shapes"></a></h4>
   <div class="algorithm" data-algorithm="cap shapes">
     The starting and ending <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cap-shapes">cap shapes</dfn> at a given <var>position</var> along a subpath are determined as follows: 
    <ol>
     <li data-md>
      <p>If <a class="property" data-link-type="propdesc" href="#propdef-stroke-linecap" id="ref-for-propdef-stroke-linecap④">stroke-linecap</a> is <a class="css" data-link-type="maybe" href="#valdef-stroke-linecap-butt" id="ref-for-valdef-stroke-linecap-butt①">butt</a>, then return an empty shape.</p>
     <li data-md>
      <p>Otherwise, if <a class="property" data-link-type="propdesc" href="#propdef-stroke-linecap" id="ref-for-propdef-stroke-linecap⑤">stroke-linecap</a> is <a class="css" data-link-type="maybe" href="#valdef-stroke-linecap-round" id="ref-for-valdef-stroke-linecap-round①">round</a>, then:</p>
      <ol>
       <li data-md>
        <p>If this is a starting cap,
then return a semicircle of radius <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width⑤">stroke-width</a> positioned such that:</p>
        <ul>
         <li data-md>
          <p>Its straight edge is parallel to
the line perpendicular to the subpath
at distance <var>position</var> along it.</p>
         <li data-md>
          <p>The midpoint of its straight edge is at
the point that is along the subpath at distance <var>position</var>.</p>
         <li data-md>
          <p>The direction from the midpoint of its arc to the midpoint of its straight edge
is the same as the direction of the subpath
at distance <var>position</var> along it.</p>
        </ul>
       <li data-md>
        <p>Otherwise, this is an ending cap.
Return a semicircle of radius stroke-width
positioned such that:</p>
        <ul>
         <li data-md>
          <p>Its straight edge is parallel to
the line perpendicular to the subpath
at distance <var>position</var> along it.</p>
         <li data-md>
          <p>The midpoint of its straight edge is at
the point that is along the subpath at distance <var>position</var>.</p>
         <li data-md>
          <p>The direction from the midpoint of its straight edge to the midpoint of its arc
is the same as the direction of the subpath
at distance <var>position</var> along it.</p>
        </ul>
      </ol>
     <li data-md>
      <p>Otherwise, <a class="property" data-link-type="propdesc" href="#propdef-stroke-linecap" id="ref-for-propdef-stroke-linecap⑥">stroke-linecap</a> is <a class="css" data-link-type="maybe" href="#valdef-stroke-linecap-square" id="ref-for-valdef-stroke-linecap-square①">square</a>:</p>
      <ol>
       <li data-md>
        <p>If this is a starting cap,
then return a rectangle with side lengths <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width⑥">stroke-width</a> and <span class="property" id="ref-for-propdef-stroke-width⑦">stroke-width</span> / 2
positioned such that:</p>
        <ul>
         <li data-md>
          <p>Its longer edges, A and B, are parallel to
the line perpendicular to the subpath
at distance <var>position</var> along it.</p>
         <li data-md>
          <p>The midpoint of A is at <var>start</var>.</p>
         <li data-md>
          <p>The direction from the midpoint of B to the midpoint of A
is the same as the direction of the subpath
at distance <var>position</var> along it.</p>
        </ul>
       <li data-md>
        <p>Otherwise, this is an ending cap.
Return a rectangle with side lengths <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width⑧">stroke-width</a> and <span class="property" id="ref-for-propdef-stroke-width⑨">stroke-width</span> / 2
positioned such that:</p>
        <ul>
         <li data-md>
          <p>Its longer edges, A and B, are parallel to
the line perpendicular to the subpath
at distance <var>position</var> along it.</p>
         <li data-md>
          <p>The midpoint of A is at <var>end</var>.</p>
         <li data-md>
          <p>The direction from the midpoint of A to the midpoint of B
is the same as the direction of the subpath
at distance <var>position</var> along it.</p>
        </ul>
      </ol>
    </ol>
    <figure>
      <img src="images/linecap-construction.svg"> 
     <figcaption>
       The three different stroke-linecap values used on paths with a single, non-zero length subpath.
				The white line is the path itself
				and the thick gray area is the stroke. 
      <p>On the top row, the green lines indicate the perpendicular to the tangent at the path endpoints
				and the pink areas are the caps.
				The bottom row shows the stroke without the perpendicular and cap highlighting.</p>
     </figcaption>
    </figure>
   </div>
   <h4 class="heading settled" data-level="4.6.5" id="algo-line-join-shape"><span class="secno">4.6.5. </span><span class="content">Line Join Shape</span><a class="self-link" href="#algo-line-join-shape"></a></h4>
   <div class="algorithm" data-algorithm="line join shape">
     The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-join-shape">line join shape</dfn> for a given segment of a subpath is determined as follows: 
    <ol>
     <li data-md>
      <p>Let <var>P</var> be the point at the end of the segment.</p>
     <li data-md>
      <p>Let <var>A</var> be the line parallel to the tangent at the end of the segment.</p>
     <li data-md>
      <p>Let <var>B</var> be the line parallel to the tangent at the start of the following segment.</p>
     <li data-md>
      <p>If <var>A</var> and <var>B</var> are the same line,
then return an empty shape.</p>
     <li data-md>
      <p>Let |A<sub>left</sub>| and |A<sub>right</sub>|
be lines parallel to <var>A</var> at a distance of <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width①⓪">stroke-width</a> / 2
to the left and to the right of <var>A</var> relative to the subpath direction,
respectively.</p>
     <li data-md>
      <p>Let |B<sub>left</sub>| and |B<sub>right</sub>|
be lines parallel to <var>B</var> at a distance of <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width①①">stroke-width</a> / 2
to the left and to the right of <var>B</var> relative to the subpath direction,
respectively.</p>
     <li data-md>
      <p>Let |P<sub>1</sub>|, |P<sub>2</sub>| and |P<sub>3</sub>| be points determined as follows:</p>
      <ol>
       <li data-md>
        <p>If the smaller angle between <var>A</var> and <var>B</var> is on the right of these lines,
considering the direction of the subpath,
then |P<sub>1</sub>| and |P<sub>2</sub>|
are the points on |A<sub>left</sub>| and |B<sub>left</sub>| closest to <var>P</var>,
and |P<sub>3</sub>| is the intersection of |A<sub>left</sub>| and |B<sub>left</sub>|.</p>
       <li data-md>
        <p>Otherwise, |P<sub>1</sub>| and |P<sub>2</sub>|
are the points on |A<sub>right</sub>| and |B<sub>right</sub>| closest to <var>P</var>,
and |P<sub>3</sub>| is the intersection of |A<sub>right</sub>| and |B<sub>right</sub>|.</p>
      </ol>
     <li data-md>
      <p>Let <var>bevel</var> be the triangle formed from the three points <var>P</var>, |P<sub>1</sub>| and |P<sub>2</sub>|.</p>
     <li data-md>
      <p>If <a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin④">stroke-linejoin</a> is <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-round" id="ref-for-valdef-stroke-linejoin-round">round</a>,
then return the union of <var>bevel</var> and a circular sector of radius <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width①②">stroke-width</a>,
centered on <var>P</var>,
and which has |P<sub>1</sub>| and |P<sub>2</sub>| as the two endpoints of the arc.</p>
     <li data-md>
      <p>If <a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin⑤">stroke-linejoin</a> is <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-arcs" id="ref-for-valdef-stroke-linejoin-arcs②">arcs</a>,
then find the circles that are tangent to the stroke edges at |P<sub>1</sub>| and |P<sub>2</sub>|
with the same curvature as the edges at those points (see below).
If both curvatures are zero, fall through to <span class="css">miter-clip</span>.</p>
      <p>Extend the stroke edges using these circles
(or a line, in the case of zero curvature):</p>
      <ul>
       <li data-md>
        <p>If the two circles (or circle and line) do not intersect,
fall through to <span class="css">miter-clip</span>.</p>
       <li data-md>
        <p>If the two circles (or circle and line) intersect,
the line join region is defined by the lines that connect <var>P</var> with |P<sub>1</sub>| and |P<sub>2</sub>|
and the arcs defined by the circles (or arc and line)
between the closest intersection point to <var>P</var>, and |P<sub>1</sub>| and |P<sub>2</sub>|.</p>
        <p>Next, calculate the <var>miter limit</var> as defined in <a href="#stroke-miterlimit">§ 4.2.5 Stroke Corner Limits: the stroke-miterlimit property</a>.
Clip any part of the line join region that extends past the <var>miter limit</var>.
Return the resulting region.</p>
        <p class="note" role="note"><span>Note:</span> Note that the curvatures are calculated in user-space
before any transforms are applied.</p>
      </ul>
     <li data-md>
      <p>If <a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin⑥">stroke-linejoin</a> is <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-miter" id="ref-for-valdef-stroke-linejoin-miter③">miter</a> or <span class="css">miter-clip</span> then the line join region is the union of <var>bevel</var> and the triangle formed from the three points |P<sub>1</sub>|, |P<sub>2</sub>| and |P<sub>3</sub>|.</p>
     <li data-md>
      <p>Let θ be the angle between A and B.
If <code>1 / sin(θ / 2) ≤ <a class="property" data-link-type="propdesc" href="#propdef-stroke-miterlimit" id="ref-for-propdef-stroke-miterlimit⑤">stroke-miterlimit</a></code>,
then return the line join region.</p>
     <li data-md>
      <p>If <a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin⑦">stroke-linejoin</a> is <span class="css">miter-clip</span>,
then clip any part of the line join region that extends past the miter limit
and return this region.</p>
     <li data-md>
      <p>Return bevel.</p>
    </ol>
    <figure>
      <img src="images/linejoin-construction.svg"> 
     <figcaption> Construction of a round line join shape, shown in pink.
				The white line is the original path,
				which has two segments that come to a point,
				and the gray region is the stroke. </figcaption>
    </figure>
    <figure>
      <img src="images/linejoin-construction-arcs.svg"> 
     <figcaption> Construction of an arcs line join shape, shown in pink.
				The white line is the original path,
				which has two segments that come to a point,
				and the gray region is the stroke.
				The dashed lines show circles that are tangent to
				and have the curvature of
				the segments at the join.
				The olive-green circles
				(concentric with the dashed circles)
				define the join shape. </figcaption>
    </figure>
   </div>
   <h4 class="heading settled" data-level="4.6.6" id="algo-arcs-linejoin"><span class="secno">4.6.6. </span><span class="content">Arcs Linejoin</span><a class="self-link" href="#algo-arcs-linejoin"></a></h4>
   <div class="algorithm" data-algorithm="arcs linejoin">
     The <dfn data-dfn-type="dfn" data-export id="arcs-linejoin">arcs linejoin<a class="self-link" href="#arcs-linejoin"></a></dfn> requires finding circles
		that are both tangent to and have the same curvatures as
		the outer stroke edges at the ends of path segments.
		To find one of these circles,
		first calculate the curvature κ of the path segment at its end (see below).
		Next, find the radius of a circle corresponding to this curvature:
		r = 1/κ.
		Increase or decrease the radius by <a class="property" data-link-type="propdesc" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width①③">stroke-width</a> / 2
		to account for the stroke:
		rc = r ± stroke-width/2.
		The center of the circle will be on a line normal to the path end
		a distance of rc away from the outer stroke edge at the end. 
    <dl class="switch">
     <dt>For a line: 
     <dd> The curvature is infinite. Extend the outer stroke edge by a line. 
     <dt>For an elliptical arc: 
     <dd>
      <div role="math">
        <span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span class="mjx-chtml MathJax_CHTML" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mi>t</mi><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow class=&quot;MJX-TeXAtom-ORD&quot;><msub><mi>r</mi><mi>x</mi></msub><msub><mi>r</mi><mi>y</mi></msub></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>(</mo><msubsup><mi>r</mi><mi>x</mi><mn>2</mn></msubsup><msup><mi>sin</mi><mn>2</mn></msup><mo>&amp;#x2061;</mo><mi>t</mi><mo>+</mo><msubsup><mi>r</mi><mi>y</mi><mn>2</mn></msubsup><msup><mi>cos</mi><mn>2</mn></msup><mo>&amp;#x2061;</mo><mi>t</mi><msup><mo stretchy=&quot;false&quot;>)</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mn>3</mn><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo>/</mo></mrow><mn>2</mn></mrow></msup></mrow></mfrac></mrow></math>" id="MathJax-Element-3-Frame" role="presentation" style="font-size: 127%; position: relative;" tabindex="0"><span aria-hidden="true" class="mjx-math" id="MJXc-Node-27" role="math"><span class="mjx-mrow" id="MJXc-Node-28"><span class="mjx-mi" id="MJXc-Node-29"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span class="mjx-mo" id="MJXc-Node-30"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-mi" id="MJXc-Node-31"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.396em; padding-bottom: 0.298em;">t</span></span><span class="mjx-mo" id="MJXc-Node-32"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space3" id="MJXc-Node-33"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span class="mjx-texatom MJXc-space3" id="MJXc-Node-34"><span class="mjx-mrow" id="MJXc-Node-35"><span class="mjx-mfrac" id="MJXc-Node-36"><span class="mjx-box MJXc-stacked" style="width: 9.76em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.76em; top: -1.243em;"><span class="mjx-texatom" id="MJXc-Node-37"><span class="mjx-mrow" id="MJXc-Node-38"><span class="mjx-msub" id="MJXc-Node-39"><span class="mjx-base"><span class="mjx-mi" id="MJXc-Node-40"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mi" id="MJXc-Node-41"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">x</span></span></span></span><span class="mjx-msub" id="MJXc-Node-42"><span class="mjx-base"><span class="mjx-mi" id="MJXc-Node-43"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mi" id="MJXc-Node-44"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.495em; padding-right: 0.006em;">y</span></span></span></span></span></span></span><span class="mjx-denominator" style="width: 9.76em; bottom: -1.193em;"><span class="mjx-texatom" id="MJXc-Node-45"><span class="mjx-mrow" id="MJXc-Node-46"><span class="mjx-mo" id="MJXc-Node-47"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msubsup" id="MJXc-Node-48"><span class="mjx-base"><span class="mjx-mi" id="MJXc-Node-49"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-stack" style="vertical-align: -0.157em;"><span class="mjx-sup" style="font-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-51"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-sub" style="font-size: 70.7%; padding-right: 0.071em;"><span class="mjx-mi" id="MJXc-Node-50"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">x</span></span></span></span></span><span class="mjx-msup MJXc-space1" id="MJXc-Node-52"><span class="mjx-base"><span class="mjx-mi" id="MJXc-Node-53"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">sin</span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.595em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-54"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-mo" id="MJXc-Node-55"><span class="mjx-char"></span></span><span class="mjx-mi MJXc-space1" id="MJXc-Node-56"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.396em; padding-bottom: 0.298em;">t</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-57"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.298em; padding-bottom: 0.445em;">+</span></span><span class="mjx-msubsup MJXc-space2" id="MJXc-Node-58"><span class="mjx-base"><span class="mjx-mi" id="MJXc-Node-59"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-stack" style="vertical-align: -0.157em;"><span class="mjx-sup" style="font-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-61"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-sub" style="font-size: 70.7%; padding-right: 0.071em;"><span class="mjx-mi" id="MJXc-Node-60"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.495em; padding-right: 0.006em;">y</span></span></span></span></span><span class="mjx-msup MJXc-space1" id="MJXc-Node-62"><span class="mjx-base"><span class="mjx-mi" id="MJXc-Node-63"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.15em; padding-bottom: 0.347em;">cos</span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.409em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-64"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-mo" id="MJXc-Node-65"><span class="mjx-char"></span></span><span class="mjx-mi MJXc-space1" id="MJXc-Node-66"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.396em; padding-bottom: 0.298em;">t</span></span><span class="mjx-msup" id="MJXc-Node-67"><span class="mjx-base"><span class="mjx-mo" id="MJXc-Node-68"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.431em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-texatom" id="MJXc-Node-69"><span class="mjx-mrow" id="MJXc-Node-70"><span class="mjx-mn" id="MJXc-Node-71"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span><span class="mjx-texatom" id="MJXc-Node-72"><span class="mjx-mrow" id="MJXc-Node-73"><span class="mjx-mo" id="MJXc-Node-74"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">/</span></span></span></span><span class="mjx-mn" id="MJXc-Node-75"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.76em;"></span></span><span class="mjx-vsize" style="height: 2.436em; vertical-align: -1.193em;"></span></span></span></span></span></span></span></span> 
<script id="MathJax-Element-3" type="math/mml">
					<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ</mi>
				      <mo stretchy="false">(</mo>
				      <mi>t</mi>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow class="MJX-TeXAtom-ORD">
				            <msub>
				              <mi>r</mi>
				              <mi>x</mi>
				            </msub>
				            <msub>
				              <mi>r</mi>
				              <mi>y</mi>
				            </msub>
					  </mrow>
					  <mrow class="MJX-TeXAtom-ORD">
				            <mo stretchy="false">(</mo>
				            <msubsup>
				              <mi>r</mi>
				              <mi>x</mi>
				              <mn>2</mn>
				            </msubsup>
				            <msup>
				              <mi>sin</mi>
				              <mn>2</mn>
				            </msup>
				            <mo>⁡</mo>
				            <mi>t</mi>
				            <mo>+</mo>
				            <msubsup>
				              <mi>r</mi>
				              <mi>y</mi>
				              <mn>2</mn>
				            </msubsup>
				            <msup>
				              <mi>cos</mi>
				              <mn>2</mn>
				            </msup>
				            <mo>⁡</mo>
				            <mi>t</mi>
				            <msup>
				              <mo stretchy="false">)</mo>
				              <mrow class="MJX-TeXAtom-ORD">
						<mn>3</mn>
						<mrow class="MJX-TeXAtom-ORD">
						  <mo>/</mo>
						</mrow>
						<mn>2</mn>
				              </mrow>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
				    </math>
				</script>
      </div>
      <p>where:</p>
      <div role="math"> <span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span class="mjx-chtml MathJax_CHTML" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>t</mi><mo>=</mo><mi>arctan</mi><mo>&amp;#x2061;</mo><mo stretchy=&quot;false&quot;>(</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><msub><mi>r</mi><mi>y</mi></msub><msub><mi>r</mi><mi>x</mi></msub></mfrac></mrow><mi>tan</mi><mo>&amp;#x2061;</mo><mi>&amp;#x3B8;</mi><mo stretchy=&quot;false&quot;>)</mo></math>" id="MathJax-Element-4-Frame" role="presentation" style="font-size: 127%; position: relative;" tabindex="0"><span aria-hidden="true" class="mjx-math" id="MJXc-Node-76" role="math"><span class="mjx-mrow" id="MJXc-Node-77"><span class="mjx-mi" id="MJXc-Node-78"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.396em; padding-bottom: 0.298em;">t</span></span><span class="mjx-mo MJXc-space3" id="MJXc-Node-79"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span class="mjx-mi MJXc-space3" id="MJXc-Node-80"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.347em; padding-bottom: 0.347em;">arctan</span></span><span class="mjx-mo" id="MJXc-Node-81"><span class="mjx-char"></span></span><span class="mjx-mo" id="MJXc-Node-82"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-texatom" id="MJXc-Node-83"><span class="mjx-mrow" id="MJXc-Node-84"><span class="mjx-mfrac" id="MJXc-Node-85"><span class="mjx-box MJXc-stacked" style="width: 1.091em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 1.091em; top: -1.243em;"><span class="mjx-msub" id="MJXc-Node-86"><span class="mjx-base"><span class="mjx-mi" id="MJXc-Node-87"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mi" id="MJXc-Node-88"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.495em; padding-right: 0.006em;">y</span></span></span></span></span><span class="mjx-denominator" style="width: 1.091em; bottom: -0.861em;"><span class="mjx-msub" id="MJXc-Node-89"><span class="mjx-base"><span class="mjx-mi" id="MJXc-Node-90"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mi" id="MJXc-Node-91"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">x</span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 1.091em;"></span></span><span class="mjx-vsize" style="height: 2.105em; vertical-align: -0.861em;"></span></span></span></span><span class="mjx-mi MJXc-space1" id="MJXc-Node-92"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.347em; padding-bottom: 0.347em;">tan</span></span><span class="mjx-mo" id="MJXc-Node-93"><span class="mjx-char"></span></span><span class="mjx-mi MJXc-space1" id="MJXc-Node-94"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.495em; padding-bottom: 0.298em;">θ</span></span><span class="mjx-mo" id="MJXc-Node-95"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span> <script id="MathJax-Element-4" type="math/mml">
				    <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>t</mi>
				      <mo>=</mo>
				      <mi>arctan</mi>
				      <mo>⁡</mo>
				      <mo stretchy="false">(</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <msub>
				            <mi>r</mi>
				            <mi>y</mi>
					  </msub>
					  <msub>
				            <mi>r</mi>
				            <mi>x</mi>
					  </msub>
					</mfrac>
				      </mrow>
				      <mi>tan</mi>
				      <mo>⁡</mo>
				      <mi>θ</mi>
				      <mo stretchy="false">)</mo>
				    </math>
				</script> </span></span></div>
      <p>The parameter θ at the beginning or end of an arc segment
			can be found by using the formulas in the <a href="https://svgwg.org/svg2-draft/implnote.html#ArcImplementationNotes">Elliptical arc implementation notes</a>.
			(Note, some renderers convert elliptical arcs to cubic Béziers prior to rendering
			so the equations here may not be needed.)</p>
     <dt>For a quadratic Bézier: 
     <dd>
      <div role="math">
        <span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span class="mjx-chtml MathJax_CHTML" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mn>0</mn><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mn>1</mn><mn>2</mn></mfrac></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>0</mn></msub><mo stretchy=&quot;false&quot;>)</mo><mo>&amp;#xD7;</mo><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>2</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><mo stretchy=&quot;false&quot;>)</mo></mrow><mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>0</mn></msub><msup><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><mn>3</mn></msup></mrow></mfrac></mrow></math>" id="MathJax-Element-5-Frame" role="presentation" style="font-size: 127%; position: relative;" tabindex="0"><span aria-hidden="true" class="mjx-math" id="MJXc-Node-96" role="math"><span class="mjx-mrow" id="MJXc-Node-97"><span class="mjx-mi" id="MJXc-Node-98"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span class="mjx-mo" id="MJXc-Node-99"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-mn" id="MJXc-Node-100"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span><span class="mjx-mo" id="MJXc-Node-101"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space3" id="MJXc-Node-102"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span class="mjx-texatom MJXc-space3" id="MJXc-Node-103"><span class="mjx-mrow" id="MJXc-Node-104"><span class="mjx-mfrac" id="MJXc-Node-105"><span class="mjx-box MJXc-stacked" style="width: 0.7em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 0.7em; top: -1.368em;"><span class="mjx-mn" id="MJXc-Node-106"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span><span class="mjx-denominator" style="width: 0.7em; bottom: -0.711em;"><span class="mjx-mn" id="MJXc-Node-107"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 0.7em;"></span></span><span class="mjx-vsize" style="height: 2.078em; vertical-align: -0.711em;"></span></span></span></span><span class="mjx-texatom" id="MJXc-Node-108"><span class="mjx-mrow" id="MJXc-Node-109"><span class="mjx-mfrac" id="MJXc-Node-110"><span class="mjx-box MJXc-stacked" style="width: 9.547em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.547em; top: -1.514em;"><span class="mjx-mrow" id="MJXc-Node-111"><span class="mjx-mo" id="MJXc-Node-112"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msub" id="MJXc-Node-113"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-114"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-115"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-116"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-117"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-118"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-119"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span class="mjx-mo" id="MJXc-Node-120"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-121"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.199em; padding-bottom: 0.347em;">×</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-122"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msub" id="MJXc-Node-123"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-124"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-125"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-126"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-127"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-128"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-129"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo" id="MJXc-Node-130"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span><span class="mjx-denominator" style="width: 9.547em; bottom: -1.228em;"><span class="mjx-mrow" id="MJXc-Node-131"><span class="mjx-texatom" id="MJXc-Node-132"><span class="mjx-mrow" id="MJXc-Node-133"><span class="mjx-mo" id="MJXc-Node-134"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span><span class="mjx-msub" id="MJXc-Node-135"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-136"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-137"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-138"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-139"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-140"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-141"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span class="mjx-msup" id="MJXc-Node-142"><span class="mjx-base"><span class="mjx-texatom" id="MJXc-Node-143"><span class="mjx-mrow" id="MJXc-Node-144"><span class="mjx-mo" id="MJXc-Node-145"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.71em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-146"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.547em;"></span></span><span class="mjx-vsize" style="height: 2.741em; vertical-align: -1.228em;"></span></span></span></span></span></span></span></span> 
<script id="MathJax-Element-5" type="math/mml">
				    <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ</mi>
				      <mo stretchy="false">(</mo>
				      <mn>0</mn>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mn>1</mn>
					  <mn>2</mn>
					</mfrac>
				      </mrow>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
				            <mo>×</mo>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
					  </mrow>
					  <mrow>
				            <mrow class="MJX-TeXAtom-ORD">
				              <mo stretchy="false">|</mo>
				            </mrow>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <msup>
				              <mrow class="MJX-TeXAtom-ORD">
						<mo stretchy="false">|</mo>
				              </mrow>
				              <mn>3</mn>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
				    </math>
				</script>
      </div>
      <div role="math">
        <span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span class="mjx-chtml MathJax_CHTML" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mn>1</mn><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mn>1</mn><mn>2</mn></mfrac></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>2</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><mo stretchy=&quot;false&quot;>)</mo><mo>&amp;#xD7;</mo><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>0</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><mo stretchy=&quot;false&quot;>)</mo></mrow><mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><msub><mi>P</mi><mn>2</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><msup><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><mn>3</mn></msup></mrow></mfrac></mrow></math>" id="MathJax-Element-6-Frame" role="presentation" style="font-size: 127%; position: relative;" tabindex="0"><span aria-hidden="true" class="mjx-math" id="MJXc-Node-147" role="math"><span class="mjx-mrow" id="MJXc-Node-148"><span class="mjx-mi" id="MJXc-Node-149"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span class="mjx-mo" id="MJXc-Node-150"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-mn" id="MJXc-Node-151"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span><span class="mjx-mo" id="MJXc-Node-152"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space3" id="MJXc-Node-153"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span class="mjx-texatom MJXc-space3" id="MJXc-Node-154"><span class="mjx-mrow" id="MJXc-Node-155"><span class="mjx-mfrac" id="MJXc-Node-156"><span class="mjx-box MJXc-stacked" style="width: 0.7em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 0.7em; top: -1.368em;"><span class="mjx-mn" id="MJXc-Node-157"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span><span class="mjx-denominator" style="width: 0.7em; bottom: -0.711em;"><span class="mjx-mn" id="MJXc-Node-158"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 0.7em;"></span></span><span class="mjx-vsize" style="height: 2.078em; vertical-align: -0.711em;"></span></span></span></span><span class="mjx-texatom" id="MJXc-Node-159"><span class="mjx-mrow" id="MJXc-Node-160"><span class="mjx-mfrac" id="MJXc-Node-161"><span class="mjx-box MJXc-stacked" style="width: 9.547em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.547em; top: -1.514em;"><span class="mjx-mrow" id="MJXc-Node-162"><span class="mjx-mo" id="MJXc-Node-163"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msub" id="MJXc-Node-164"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-165"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-166"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-167"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-168"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-169"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-170"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo" id="MJXc-Node-171"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-172"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.199em; padding-bottom: 0.347em;">×</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-173"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msub" id="MJXc-Node-174"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-175"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-176"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-177"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-178"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-179"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-180"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo" id="MJXc-Node-181"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span><span class="mjx-denominator" style="width: 9.547em; bottom: -1.228em;"><span class="mjx-mrow" id="MJXc-Node-182"><span class="mjx-texatom" id="MJXc-Node-183"><span class="mjx-mrow" id="MJXc-Node-184"><span class="mjx-mo" id="MJXc-Node-185"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span><span class="mjx-msub" id="MJXc-Node-186"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-187"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-188"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-189"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-190"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-191"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-192"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-msup" id="MJXc-Node-193"><span class="mjx-base"><span class="mjx-texatom" id="MJXc-Node-194"><span class="mjx-mrow" id="MJXc-Node-195"><span class="mjx-mo" id="MJXc-Node-196"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.71em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-197"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.547em;"></span></span><span class="mjx-vsize" style="height: 2.741em; vertical-align: -1.228em;"></span></span></span></span></span></span></span></span> 
<script id="MathJax-Element-6" type="math/mml">
					<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ</mi>
				      <mo stretchy="false">(</mo>
				      <mn>1</mn>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mn>1</mn>
					  <mn>2</mn>
					</mfrac>
				      </mrow>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
				            <mo>×</mo>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
					  </mrow>
					  <mrow>
				            <mrow class="MJX-TeXAtom-ORD">
				              <mo stretchy="false">|</mo>
				            </mrow>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <msup>
				              <mrow class="MJX-TeXAtom-ORD">
						<mo stretchy="false">|</mo>
				              </mrow>
				              <mn>3</mn>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
				    </math>
				</script>
      </div>
      <p>Where κ(0) and κ(1) are the signed curvatures
			at the start and end of the path segment respectively,
			and the P’s are the three points that define the quadratic Bézier.</p>
     <dt>For a cubic Bézier: 
     <dd>
      <div role="math">
        <span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span class="mjx-chtml MathJax_CHTML" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mn>0</mn><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mn>2</mn><mn>3</mn></mfrac></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>0</mn></msub><mo stretchy=&quot;false&quot;>)</mo><mo>&amp;#xD7;</mo><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>2</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><mo stretchy=&quot;false&quot;>)</mo></mrow><mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>0</mn></msub><msup><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><mn>3</mn></msup></mrow></mfrac></mrow></math>" id="MathJax-Element-7-Frame" role="presentation" style="font-size: 127%; position: relative;" tabindex="0"><span aria-hidden="true" class="mjx-math" id="MJXc-Node-198" role="math"><span class="mjx-mrow" id="MJXc-Node-199"><span class="mjx-mi" id="MJXc-Node-200"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span class="mjx-mo" id="MJXc-Node-201"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-mn" id="MJXc-Node-202"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span><span class="mjx-mo" id="MJXc-Node-203"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space3" id="MJXc-Node-204"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span class="mjx-texatom MJXc-space3" id="MJXc-Node-205"><span class="mjx-mrow" id="MJXc-Node-206"><span class="mjx-mfrac" id="MJXc-Node-207"><span class="mjx-box MJXc-stacked" style="width: 0.7em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 0.7em; top: -1.368em;"><span class="mjx-mn" id="MJXc-Node-208"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-denominator" style="width: 0.7em; bottom: -0.733em;"><span class="mjx-mn" id="MJXc-Node-209"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 0.7em;"></span></span><span class="mjx-vsize" style="height: 2.1em; vertical-align: -0.733em;"></span></span></span></span><span class="mjx-texatom" id="MJXc-Node-210"><span class="mjx-mrow" id="MJXc-Node-211"><span class="mjx-mfrac" id="MJXc-Node-212"><span class="mjx-box MJXc-stacked" style="width: 9.547em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.547em; top: -1.514em;"><span class="mjx-mrow" id="MJXc-Node-213"><span class="mjx-mo" id="MJXc-Node-214"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msub" id="MJXc-Node-215"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-216"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-217"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-218"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-219"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-220"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-221"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span class="mjx-mo" id="MJXc-Node-222"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-223"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.199em; padding-bottom: 0.347em;">×</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-224"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msub" id="MJXc-Node-225"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-226"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-227"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-228"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-229"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-230"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-231"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo" id="MJXc-Node-232"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span><span class="mjx-denominator" style="width: 9.547em; bottom: -1.228em;"><span class="mjx-mrow" id="MJXc-Node-233"><span class="mjx-texatom" id="MJXc-Node-234"><span class="mjx-mrow" id="MJXc-Node-235"><span class="mjx-mo" id="MJXc-Node-236"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span><span class="mjx-msub" id="MJXc-Node-237"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-238"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-239"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-240"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-241"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-242"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-243"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span class="mjx-msup" id="MJXc-Node-244"><span class="mjx-base"><span class="mjx-texatom" id="MJXc-Node-245"><span class="mjx-mrow" id="MJXc-Node-246"><span class="mjx-mo" id="MJXc-Node-247"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.71em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-248"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.547em;"></span></span><span class="mjx-vsize" style="height: 2.741em; vertical-align: -1.228em;"></span></span></span></span></span></span></span></span> 
<script id="MathJax-Element-7" type="math/mml">
					<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ</mi>
				      <mo stretchy="false">(</mo>
				      <mn>0</mn>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mn>2</mn>
					  <mn>3</mn>
					</mfrac>
				      </mrow>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
				            <mo>×</mo>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
					  </mrow>
					  <mrow>
				            <mrow class="MJX-TeXAtom-ORD">
				              <mo stretchy="false">|</mo>
				            </mrow>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <msup>
				              <mrow class="MJX-TeXAtom-ORD">
						<mo stretchy="false">|</mo>
				              </mrow>
				              <mn>3</mn>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
			    	</math>
				</script>
      </div>
      <div role="math">
        <span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span class="mjx-chtml MathJax_CHTML" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mn>1</mn><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mn>2</mn><mn>3</mn></mfrac></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>3</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>2</mn></msub><mo stretchy=&quot;false&quot;>)</mo><mo>&amp;#xD7;</mo><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>2</mn></msub><mo stretchy=&quot;false&quot;>)</mo></mrow><mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><msub><mi>P</mi><mn>3</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>2</mn></msub><msup><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><mn>3</mn></msup></mrow></mfrac></mrow></math>" id="MathJax-Element-8-Frame" role="presentation" style="font-size: 127%; position: relative;" tabindex="0"><span aria-hidden="true" class="mjx-math" id="MJXc-Node-249" role="math"><span class="mjx-mrow" id="MJXc-Node-250"><span class="mjx-mi" id="MJXc-Node-251"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span class="mjx-mo" id="MJXc-Node-252"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-mn" id="MJXc-Node-253"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span><span class="mjx-mo" id="MJXc-Node-254"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space3" id="MJXc-Node-255"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span class="mjx-texatom MJXc-space3" id="MJXc-Node-256"><span class="mjx-mrow" id="MJXc-Node-257"><span class="mjx-mfrac" id="MJXc-Node-258"><span class="mjx-box MJXc-stacked" style="width: 0.7em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 0.7em; top: -1.368em;"><span class="mjx-mn" id="MJXc-Node-259"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-denominator" style="width: 0.7em; bottom: -0.733em;"><span class="mjx-mn" id="MJXc-Node-260"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 0.7em;"></span></span><span class="mjx-vsize" style="height: 2.1em; vertical-align: -0.733em;"></span></span></span></span><span class="mjx-texatom" id="MJXc-Node-261"><span class="mjx-mrow" id="MJXc-Node-262"><span class="mjx-mfrac" id="MJXc-Node-263"><span class="mjx-box MJXc-stacked" style="width: 9.547em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.547em; top: -1.514em;"><span class="mjx-mrow" id="MJXc-Node-264"><span class="mjx-mo" id="MJXc-Node-265"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msub" id="MJXc-Node-266"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-267"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-268"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-269"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-270"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-271"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-272"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-mo" id="MJXc-Node-273"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-274"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.199em; padding-bottom: 0.347em;">×</span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-275"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span class="mjx-msub" id="MJXc-Node-276"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-277"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-278"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-279"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-280"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-281"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-282"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-mo" id="MJXc-Node-283"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span><span class="mjx-denominator" style="width: 9.547em; bottom: -1.228em;"><span class="mjx-mrow" id="MJXc-Node-284"><span class="mjx-texatom" id="MJXc-Node-285"><span class="mjx-mrow" id="MJXc-Node-286"><span class="mjx-mo" id="MJXc-Node-287"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span><span class="mjx-msub" id="MJXc-Node-288"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-289"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-290"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span><span class="mjx-mo MJXc-space2" id="MJXc-Node-291"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span class="mjx-msub MJXc-space2" id="MJXc-Node-292"><span class="mjx-base" style="margin-right: -0.109em;"><span class="mjx-mi" id="MJXc-Node-293"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-294"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span class="mjx-msup" id="MJXc-Node-295"><span class="mjx-base"><span class="mjx-texatom" id="MJXc-Node-296"><span class="mjx-mrow" id="MJXc-Node-297"><span class="mjx-mo" id="MJXc-Node-298"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.71em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" id="MJXc-Node-299"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.547em;"></span></span><span class="mjx-vsize" style="height: 2.741em; vertical-align: -1.228em;"></span></span></span></span></span></span></span></span> 
<script id="MathJax-Element-8" type="math/mml">
					<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ</mi>
				      <mo stretchy="false">(</mo>
				      <mn>1</mn>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mn>2</mn>
					  <mn>3</mn>
					</mfrac>
				      </mrow>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>3</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
				            <mo>×</mo>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
					  </mrow>
					  <mrow>
				            <mrow class="MJX-TeXAtom-ORD">
				              <mo stretchy="false">|</mo>
				            </mrow>
				            <msub>
				              <mi>P</mi>
				              <mn>3</mn>
				            </msub>
				            <mo>−</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <msup>
				              <mrow class="MJX-TeXAtom-ORD">
						<mo stretchy="false">|</mo>
				              </mrow>
				              <mn>3</mn>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
					</math>
				</script>
      </div>
      <p>Where κ(0) and κ(1) are the signed curvatures
			at the start and end of the path segment respectively,
			and the P’s are the four points that define the cubic Bézier.
			Note, if P0 and P1, or P2 and P3, are degenerate,
			the curvature will be infinite
			and a line should be used in constructing the join.</p>
    </dl>
    <h3 class="heading settled" data-level="4.7" id="perfect-world"><span class="secno">4.7. </span><span class="content">Perfect-World Syntax</span><a class="self-link" href="#perfect-world"></a></h3>
    <p>The <a class="property" data-link-type="propdesc">stroke-*</a> properties and values from SVG inherit SVG’s somewhat incoherent naming schemes.
	We’d name them differently if they were being designed today.
	We should see how much we can move toward this,
	perhaps with alias/shorthands.</p>
    <table class="data">
     <colgroup span="1">
     <colgroup span="1">
     <thead>
      <tr>
       <th>Old Syntax 
       <th>New Syntax 
     <tbody>
      <tr>
       <td>stroke 
       <td>stroke-paint 
      <tr>
       <td>
       <td><a class="property" data-link-type="propdesc" href="#propdef-stroke" id="ref-for-propdef-stroke⑤">stroke</a> shorthand 
      <tr>
       <td>stroke-alignment 
       <td>stroke-align: inset | outset | center 
      <tr>
       <td>stroke-opacity 
       <td>no change 
      <tr>
       <td>stroke-width 
       <td>no change 
      <tr>
       <td>stroke-linecap 
       <td>stroke-cap: none | round | square 
      <tr>
       <td>stroke-linejoin 
       <td>stroke-corner-shape: bevel | round | [ arc | miter ] [ bevel | round ]? 
      <tr>
       <td>stroke-miterlimit 
       <td>stroke-corner-limit 
      <tr>
       <td>stroke-dasharray 
       <td>stroke-dash-array 
      <tr>
       <td>stroke-dashoffset 
       <td>stroke-dash-offset 
      <tr>
       <td>stroke-dashcorner 
       <td>stroke-dash-corner 
      <tr>
       <td>stroke-dashadjust 
       <td>stroke-dash-justify: none | [ stretch | compress ] || [ dashes | gaps ] 
      <tr>
       <td>
       <td>stroke-dash shorthand 
    </table>
    <h2 class="heading settled" data-level="5" id="text-decor"><span class="secno">5. </span><span class="content">Text Decoration Fills and Strokes</span><a class="self-link" href="#text-decor"></a></h2>
    <p>For handling fills and strokes on text decorations,
	two sets of <a class="property" data-link-type="propdesc" href="#propdef-fill" id="ref-for-propdef-fill⑦">fill</a> and <a class="property" data-link-type="propdesc" href="#propdef-stroke" id="ref-for-propdef-stroke⑥">stroke</a> properties are defined:
	one prefixed with <a class="property" data-link-type="propdesc">text-decoration-*</a> for <a href="https://www.w3.org/TR/css-text-decor-3/#line-decoration">line decorations</a> and one prefixed with <span class="property">text-emphasis-*</span> for <a href="https://www.w3.org/TR/css-text-decor-3/#emphasis-marks">emphasis marks</a>.
	These properties are exactly analogous to the <span class="property" id="ref-for-propdef-fill⑧">fill</span> and <span class="property" id="ref-for-propdef-stroke⑦">stroke</span> properties above,
	except that:</p>
    <ul>
     <li data-md>
      <p>(like <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-decor-3/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> itself) the <a class="property" data-link-type="propdesc">text-decoration-*</a> variants do not inherit.</p>
     <li data-md>
      <p>the initial value of each such property is a <span class="css">match-text</span> keyword
which takes the value from the element’s corresponding <a class="property" data-link-type="propdesc">fill-*</a>/<span class="property">stroke-*</span> property.</p>
    </ul>
    <p class="issue" id="issue-c8b0ec40"><a class="self-link" href="#issue-c8b0ec40"></a> These should definitely be at-risk,
	possibly deferred to the next level.</p>
    <h2 class="heading settled" data-level="6" id="priv-sec"><span class="secno">6. </span><span class="content">Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
    <p>This specification introduces no new privacy or security considerations.</p>
   </div>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#valdef-stroke-linejoin-arcs">arcs</a><span>, in §4.2.4</span>
   <li><a href="#arcs-linejoin">arcs linejoin</a><span>, in §4.6.6</span>
   <li><a href="#valdef-stroke-linejoin-bevel">bevel</a><span>, in §4.2.4</span>
   <li>
    border-box
    <ul>
     <li><a href="#valdef-fill-origin-border-box">value for fill-origin</a><span>, in §3.3.3</span>
     <li><a href="#valdef-stroke-origin-border-box">value for stroke-origin</a><span>, in §4.4.3</span>
    </ul>
   <li><a href="#valdef-stroke-linecap-butt">butt</a><span>, in §4.2.3</span>
   <li><a href="#cap-shapes">cap shapes</a><span>, in §4.6.4</span>
   <li><a href="#valdef-stroke-align-center">center</a><span>, in §4.2.2</span>
   <li><a href="#valdef-svg-paint-child">child</a><span>, in §2.1</span>
   <li><a href="#valdef-svg-paint-child-integer">child(&lt;integer>)</a><span>, in §2.1</span>
   <li><a href="#valdef-stroke-dash-justify-compress">compress</a><span>, in §4.3.3</span>
   <li>
    content-box
    <ul>
     <li><a href="#valdef-fill-origin-content-box">value for fill-origin</a><span>, in §3.3.3</span>
     <li><a href="#valdef-stroke-origin-content-box">value for stroke-origin</a><span>, in §4.4.3</span>
    </ul>
   <li><a href="#--corner-diagonal">corner diagonal</a><span>, in §4.2.5</span>
   <li><a href="#valdef-stroke-linejoin-crop">crop</a><span>, in §4.2.4</span>
   <li><a href="#valdef-stroke-dash-justify-dashes">dashes</a><span>, in §4.3.3</span>
   <li><a href="#dash-positions">dash positions</a><span>, in §4.6.3</span>
   <li><a href="#valdef-fill-rule-evenodd">evenodd</a><span>, in §3.2.1</span>
   <li><a href="#valdef-stroke-linejoin-fallback">fallback</a><span>, in §4.2.4</span>
   <li>
    fill
    <ul>
     <li><a href="#propdef-fill">(property)</a><span>, in §3.3.7</span>
     <li><a href="#fill">definition of</a><span>, in §3</span>
    </ul>
   <li>
    fill-box
    <ul>
     <li><a href="#valdef-fill-origin-fill-box">value for fill-origin</a><span>, in §3.3.3</span>
     <li><a href="#valdef-stroke-origin-fill-box">value for stroke-origin</a><span>, in §4.4.3</span>
    </ul>
   <li><a href="#propdef-fill-break">fill-break</a><span>, in §3.2.2</span>
   <li><a href="#propdef-fill-color">fill-color</a><span>, in §3.3.1</span>
   <li><a href="#filled">filled</a><span>, in §1</span>
   <li><a href="#propdef-fill-image">fill-image</a><span>, in §3.3.2</span>
   <li><a href="#propdef-fill-opacity">fill-opacity</a><span>, in §3.4.1</span>
   <li><a href="#propdef-fill-origin">fill-origin</a><span>, in §3.3.3</span>
   <li><a href="#fill-painting-area">fill painting area</a><span>, in §3.3.3</span>
   <li><a href="#propdef-fill-position">fill-position</a><span>, in §3.3.4</span>
   <li><a href="#fill-positioning-area">fill positioning area</a><span>, in §3.3.3</span>
   <li><a href="#propdef-fill-repeat">fill-repeat</a><span>, in §3.3.6</span>
   <li><a href="#propdef-fill-rule">fill-rule</a><span>, in §3.2.1</span>
   <li><a href="#propdef-fill-size">fill-size</a><span>, in §3.3.5</span>
   <li><a href="#valdef-stroke-dash-justify-gaps">gaps</a><span>, in §4.3.3</span>
   <li><a href="#valdef-stroke-align-inset">inset</a><span>, in §4.2.2</span>
   <li><a href="#valdef-stroke-dasharray-length-percentage">&lt;length-percentage>+#</a><span>, in §4.3.1</span>
   <li><a href="#line-join-shape">line join shape</a><span>, in §4.6.5</span>
   <li>
    match-parent
    <ul>
     <li><a href="#valdef-fill-origin-match-parent">value for fill-origin</a><span>, in §3.3.3</span>
     <li><a href="#valdef-stroke-origin-match-parent">value for stroke-origin</a><span>, in §4.4.3</span>
    </ul>
   <li><a href="#valdef-stroke-linejoin-miter">miter</a><span>, in §4.2.4</span>
   <li>
    none
    <ul>
     <li><a href="#valdef-paint-none">value for &lt;paint></a><span>, in §2</span>
     <li><a href="#valdef-stroke-dash-corner-none">value for stroke-dash-corner</a><span>, in §4.3.3</span>
     <li><a href="#valdef-stroke-dash-justify-none">value for stroke-dash-justify</a><span>, in §4.3.3</span>
     <li><a href="#valdef-stroke-dasharray-none">value for stroke-dasharray</a><span>, in §4.3.1</span>
    </ul>
   <li><a href="#valdef-fill-rule-nonzero">nonzero</a><span>, in §3.2.1</span>
   <li><a href="#valdef-stroke-miterlimit-number">&lt;number></a><span>, in §4.2.5</span>
   <li><a href="#valdef-stroke-align-outset">outset</a><span>, in §4.2.2</span>
   <li>
    padding-box
    <ul>
     <li><a href="#valdef-fill-origin-padding-box">value for fill-origin</a><span>, in §3.3.3</span>
     <li><a href="#valdef-stroke-origin-padding-box">value for stroke-origin</a><span>, in §4.4.3</span>
    </ul>
   <li><a href="#typedef-paint">&lt;paint></a><span>, in §2</span>
   <li>
    round
    <ul>
     <li><a href="#valdef-stroke-linecap-round">value for stroke-linecap</a><span>, in §4.2.3</span>
     <li><a href="#valdef-stroke-linejoin-round">value for stroke-linejoin</a><span>, in §4.2.4</span>
    </ul>
   <li><a href="#scaled-viewport-size">scaled viewport size</a><span>, in §4.2.1</span>
   <li><a href="#valdef-stroke-linecap-square">square</a><span>, in §4.2.3</span>
   <li><a href="#valdef-stroke-dash-justify-stretch">stretch</a><span>, in §4.3.3</span>
   <li>
    stroke
    <ul>
     <li><a href="#propdef-stroke">(property)</a><span>, in §4.4.7</span>
     <li><a href="#stroke">definition of</a><span>, in §4</span>
    </ul>
   <li><a href="#propdef-stroke-align">stroke-align</a><span>, in §4.2.2</span>
   <li>
    stroke-box
    <ul>
     <li><a href="#valdef-fill-origin-stroke-box">value for fill-origin</a><span>, in §3.3.3</span>
     <li><a href="#valdef-stroke-origin-stroke-box">value for stroke-origin</a><span>, in §4.4.3</span>
    </ul>
   <li><a href="#propdef-stroke-break">stroke-break</a><span>, in §4.2.6</span>
   <li><a href="#propdef-stroke-color">stroke-color</a><span>, in §4.4.1</span>
   <li><a href="#stroked">stroked</a><span>, in §1</span>
   <li><a href="#propdef-stroke-dasharray">stroke-dasharray</a><span>, in §4.3.1</span>
   <li><a href="#propdef-stroke-dash-corner">stroke-dash-corner</a><span>, in §4.3.3</span>
   <li><a href="#propdef-stroke-dash-justify">stroke-dash-justify</a><span>, in §4.3.3</span>
   <li><a href="#propdef-stroke-dashoffset">stroke-dashoffset</a><span>, in §4.3.2</span>
   <li><a href="#propdef-stroke-image">stroke-image</a><span>, in §4.4.2</span>
   <li><a href="#propdef-stroke-linecap">stroke-linecap</a><span>, in §4.2.3</span>
   <li><a href="#propdef-stroke-linejoin">stroke-linejoin</a><span>, in §4.2.4</span>
   <li><a href="#propdef-stroke-miterlimit">stroke-miterlimit</a><span>, in §4.2.5</span>
   <li><a href="#propdef-stroke-opacity">stroke-opacity</a><span>, in §4.5.1</span>
   <li><a href="#propdef-stroke-origin">stroke-origin</a><span>, in §4.4.3</span>
   <li><a href="#stroke-painting-area">stroke painting area</a><span>, in §4.4.3</span>
   <li><a href="#propdef-stroke-position">stroke-position</a><span>, in §4.4.4</span>
   <li><a href="#stroke-positioning-area">stroke positioning area</a><span>, in §4.4.3</span>
   <li><a href="#propdef-stroke-repeat">stroke-repeat</a><span>, in §4.4.6</span>
   <li><a href="#stroke-shape">stroke shape</a><span>, in §4.6.2</span>
   <li><a href="#propdef-stroke-size">stroke-size</a><span>, in §4.4.5</span>
   <li><a href="#propdef-stroke-width">stroke-width</a><span>, in §4.2.1</span>
   <li><a href="#typedef-svg-paint">&lt;svg-paint></a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-fragment">
   <a href="https://www.w3.org/TR/css3-break/#fragment">https://www.w3.org/TR/css3-break/#fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragment">3.2.2. Fragmented Fills: the fill-break property</a>
    <li><a href="#ref-for-fragment①">4.2.6. Fragmented Strokes: the stroke-break property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-box-decoration-break">
   <a href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break">https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-decoration-break">3. Fills</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shorthand-property">
   <a href="https://www.w3.org/TR/css-cascade-4/#shorthand-property">https://www.w3.org/TR/css-cascade-4/#shorthand-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shorthand-property">3.3.7. Fill Shorthand: the fill property</a>
    <li><a href="#ref-for-shorthand-property①">4.4.7. Stroke Shorthand: the stroke property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cascade-origin-ua">
   <a href="https://www.w3.org/TR/css-cascade-4/#cascade-origin-ua">https://www.w3.org/TR/css-cascade-4/#cascade-origin-ua</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade-origin-ua">3.3.1. Fill Color: the fill-color property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-color">
   <a href="https://www.w3.org/TR/css-color-4/#propdef-color">https://www.w3.org/TR/css-color-4/#propdef-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color">3.3.1. Fill Color: the fill-color property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-opacity">
   <a href="https://www.w3.org/TR/css-color-4/#propdef-opacity">https://www.w3.org/TR/css-color-4/#propdef-opacity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-opacity">3.4.1. Fill Opacity: the fill-opacity property</a> <a href="#ref-for-propdef-opacity①">(2)</a>
    <li><a href="#ref-for-propdef-opacity②">4.5.1. Stroke Opacity: the stroke-opacity property</a> <a href="#ref-for-propdef-opacity③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-transparent">
   <a href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent">https://www.w3.org/TR/css-color-4/#valdef-color-transparent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-transparent">3.3.7. Fill Shorthand: the fill property</a>
    <li><a href="#ref-for-valdef-color-transparent①">4.1. Layering Multiple Strokes</a> <a href="#ref-for-valdef-color-transparent②">(2)</a>
    <li><a href="#ref-for-valdef-color-transparent③">4.4.7. Stroke Shorthand: the stroke property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-initial-containing-block">
   <a href="https://www.w3.org/TR/css-display-3/#initial-containing-block">https://www.w3.org/TR/css-display-3/#initial-containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initial-containing-block">3.3.3. Fill Positioning Area: the fill-origin property</a>
    <li><a href="#ref-for-initial-containing-block①">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-image">
   <a href="https://www.w3.org/TR/css4-images/#funcdef-image">https://www.w3.org/TR/css4-images/#funcdef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-image">3.3.1. Fill Color: the fill-color property</a>
    <li><a href="#ref-for-funcdef-image①">4.4.1. Stroke Color: the stroke-color property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalid-image">
   <a href="https://www.w3.org/TR/css4-images/#invalid-image">https://www.w3.org/TR/css4-images/#invalid-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalid-image">3.3.1. Fill Color: the fill-color property</a> <a href="#ref-for-invalid-image①">(2)</a>
    <li><a href="#ref-for-invalid-image②">3.3.7. Fill Shorthand: the fill property</a>
    <li><a href="#ref-for-invalid-image③">4.4.1. Stroke Color: the stroke-color property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalid-image">
   <a href="https://www.w3.org/TR/css4-images/#invalid-image">https://www.w3.org/TR/css4-images/#invalid-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalid-image">3.3.1. Fill Color: the fill-color property</a> <a href="#ref-for-invalid-image①">(2)</a>
    <li><a href="#ref-for-invalid-image②">3.3.7. Fill Shorthand: the fill property</a>
    <li><a href="#ref-for-invalid-image③">4.4.1. Stroke Color: the stroke-color property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-invalid">
   <a href="https://drafts.csswg.org/css-syntax-3/#css-invalid">https://drafts.csswg.org/css-syntax-3/#css-invalid</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-invalid">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-decoration">
   <a href="https://www.w3.org/TR/css-text-decor-3/#propdef-text-decoration">https://www.w3.org/TR/css-text-decor-3/#propdef-text-decoration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-decoration">5. Text Decoration Fills and Strokes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-integer-value">
   <a href="https://www.w3.org/TR/css3-values/#integer-value">https://www.w3.org/TR/css3-values/#integer-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integer-value">2.1. SVG-Specific Paints</a> <a href="#ref-for-integer-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://www.w3.org/TR/css3-values/#length-value">https://www.w3.org/TR/css3-values/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a> <a href="#ref-for-length-value①">(2)</a> <a href="#ref-for-length-value②">(3)</a> <a href="#ref-for-length-value③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-number-value">
   <a href="https://www.w3.org/TR/css3-values/#number-value">https://www.w3.org/TR/css3-values/#number-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number-value">3.4.1. Fill Opacity: the fill-opacity property</a>
    <li><a href="#ref-for-number-value①">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a> <a href="#ref-for-number-value②">(2)</a>
    <li><a href="#ref-for-number-value③">4.5.1. Stroke Opacity: the stroke-opacity property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-url-value">
   <a href="https://www.w3.org/TR/css3-values/#url-value">https://www.w3.org/TR/css3-values/#url-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-value">2. Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-comma">
   <a href="https://www.w3.org/TR/css-values-4/#mult-comma">https://www.w3.org/TR/css-values-4/#mult-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-comma">3.3.2. Fill Image Sources: the fill-image property</a>
    <li><a href="#ref-for-mult-comma①">3.3.4. Positioning Fill Images: the fill-position property</a>
    <li><a href="#ref-for-mult-comma②">3.3.5. Sizing Fill Images: the fill-size property</a>
    <li><a href="#ref-for-mult-comma③">3.3.6. Tiling Fill Images: the fill-repeat property</a>
    <li><a href="#ref-for-mult-comma④">4.2.1. Stroke Thickness: the stroke-width property</a>
    <li><a href="#ref-for-mult-comma⑤">4.3.1. Stroke Dash Patterns: the stroke-dasharray property</a>
    <li><a href="#ref-for-mult-comma⑥">4.4.1. Stroke Color: the stroke-color property</a>
    <li><a href="#ref-for-mult-comma⑦">4.4.2. Stroke Image Sources: the stroke-image property</a>
    <li><a href="#ref-for-mult-comma⑧">4.4.4. Positioning Stroke Images: the stroke-position property</a>
    <li><a href="#ref-for-mult-comma⑨">4.4.5. Sizing Stroke Images: the stroke-size property</a>
    <li><a href="#ref-for-mult-comma①⓪">4.4.6. Tiling Stroke Images: the stroke-repeat property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-one-plus">
   <a href="https://www.w3.org/TR/css-values-4/#mult-one-plus">https://www.w3.org/TR/css-values-4/#mult-one-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-one-plus">4.3.1. Stroke Dash Patterns: the stroke-dasharray property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
   <a href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage">https://www.w3.org/TR/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">4.2.1. Stroke Thickness: the stroke-width property</a> <a href="#ref-for-typedef-length-percentage①">(2)</a>
    <li><a href="#ref-for-typedef-length-percentage②">4.3.1. Stroke Dash Patterns: the stroke-dasharray property</a> <a href="#ref-for-typedef-length-percentage③">(2)</a> <a href="#ref-for-typedef-length-percentage④">(3)</a>
    <li><a href="#ref-for-typedef-length-percentage⑤">4.3.2. Stroke Dash Start Position: the stroke-dashoffset property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-position">
   <a href="https://www.w3.org/TR/css-values-4/#typedef-position">https://www.w3.org/TR/css-values-4/#typedef-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-position">3.3.4. Positioning Fill Images: the fill-position property</a>
    <li><a href="#ref-for-typedef-position①">4.4.4. Positioning Stroke Images: the stroke-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-functional-notation">
   <a href="https://www.w3.org/TR/css-values-4/#functional-notation">https://www.w3.org/TR/css-values-4/#functional-notation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-functional-notation">2.1. SVG-Specific Paints</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://www.w3.org/TR/css-values-4/#comb-one">https://www.w3.org/TR/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2. Paint</a> <a href="#ref-for-comb-one①">(2)</a>
    <li><a href="#ref-for-comb-one②">2.1. SVG-Specific Paints</a>
    <li><a href="#ref-for-comb-one③">3.2.1. Winding Rule for SVG shapes: the fill-rule property</a>
    <li><a href="#ref-for-comb-one④">3.2.2. Fragmented Fills: the fill-break property</a> <a href="#ref-for-comb-one⑤">(2)</a>
    <li><a href="#ref-for-comb-one⑥">3.3.3. Fill Positioning Area: the fill-origin property</a> <a href="#ref-for-comb-one⑦">(2)</a> <a href="#ref-for-comb-one⑧">(3)</a> <a href="#ref-for-comb-one⑨">(4)</a> <a href="#ref-for-comb-one①⓪">(5)</a>
    <li><a href="#ref-for-comb-one①①">4.2.2. Stroke Positioning: the stroke-align property</a> <a href="#ref-for-comb-one①②">(2)</a>
    <li><a href="#ref-for-comb-one①③">4.2.3. Stroke End Shapes: the stroke-linecap property</a> <a href="#ref-for-comb-one①④">(2)</a>
    <li><a href="#ref-for-comb-one①⑤">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a> <a href="#ref-for-comb-one①⑥">(2)</a> <a href="#ref-for-comb-one①⑦">(3)</a> <a href="#ref-for-comb-one①⑧">(4)</a>
    <li><a href="#ref-for-comb-one①⑨">4.2.6. Fragmented Strokes: the stroke-break property</a> <a href="#ref-for-comb-one②⓪">(2)</a>
    <li><a href="#ref-for-comb-one②①">4.3.1. Stroke Dash Patterns: the stroke-dasharray property</a>
    <li><a href="#ref-for-comb-one②②">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a> <a href="#ref-for-comb-one②③">(2)</a> <a href="#ref-for-comb-one②④">(3)</a>
    <li><a href="#ref-for-comb-one②⑤">4.4.3. Stroke Positioning Area: the stroke-origin property</a> <a href="#ref-for-comb-one②⑥">(2)</a> <a href="#ref-for-comb-one②⑦">(3)</a> <a href="#ref-for-comb-one②⑧">(4)</a> <a href="#ref-for-comb-one②⑨">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-any">
   <a href="https://www.w3.org/TR/css-values-4/#comb-any">https://www.w3.org/TR/css-values-4/#comb-any</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a>
    <li><a href="#ref-for-comb-any①">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a> <a href="#ref-for-comb-any②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valuea-def-color">
   <a href="https://www.w3.org/TR/css3-color/#valuea-def-color">https://www.w3.org/TR/css3-color/#valuea-def-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuea-def-color">2. Paint</a>
    <li><a href="#ref-for-valuea-def-color①">3.3.1. Fill Color: the fill-color property</a>
    <li><a href="#ref-for-valuea-def-color②">4.4.1. Stroke Color: the stroke-color property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-image-type">
   <a href="https://www.w3.org/TR/css3-images/#image-type">https://www.w3.org/TR/css3-images/#image-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-image-type">2. Paint</a> <a href="#ref-for-image-type①">(2)</a>
    <li><a href="#ref-for-image-type②">3.3.2. Fill Image Sources: the fill-image property</a>
    <li><a href="#ref-for-image-type③">4.4.2. Stroke Image Sources: the stroke-image property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-bg-size">
   <a href="https://www.w3.org/TR/css3-background/#typedef-bg-size">https://www.w3.org/TR/css3-background/#typedef-bg-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-bg-size">3.3.5. Sizing Fill Images: the fill-size property</a>
    <li><a href="#ref-for-typedef-bg-size①">4.4.5. Sizing Stroke Images: the stroke-size property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-repeat-style">
   <a href="https://www.w3.org/TR/css3-background/#typedef-repeat-style">https://www.w3.org/TR/css3-background/#typedef-repeat-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-repeat-style">3.3.6. Tiling Fill Images: the fill-repeat property</a>
    <li><a href="#ref-for-typedef-repeat-style①">4.4.6. Tiling Stroke Images: the stroke-repeat property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-background-size-auto">
   <a href="https://www.w3.org/TR/css3-background/#valdef-background-size-auto">https://www.w3.org/TR/css3-background/#valdef-background-size-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-background-size-auto">3.3.5. Sizing Fill Images: the fill-size property</a>
    <li><a href="#ref-for-valdef-background-size-auto①">4.4.5. Sizing Stroke Images: the stroke-size property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background">
   <a href="https://www.w3.org/TR/css3-background/#propdef-background">https://www.w3.org/TR/css3-background/#propdef-background</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background">3.3.7. Fill Shorthand: the fill property</a> <a href="#ref-for-propdef-background①">(2)</a> <a href="#ref-for-propdef-background②">(3)</a>
    <li><a href="#ref-for-propdef-background③">4.4.7. Stroke Shorthand: the stroke property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-color">
   <a href="https://www.w3.org/TR/css3-background/#propdef-background-color">https://www.w3.org/TR/css3-background/#propdef-background-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-color">3.3.1. Fill Color: the fill-color property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-image">
   <a href="https://www.w3.org/TR/css3-background/#propdef-background-image">https://www.w3.org/TR/css3-background/#propdef-background-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-image">3.3.2. Fill Image Sources: the fill-image property</a>
    <li><a href="#ref-for-propdef-background-image①">4.4.2. Stroke Image Sources: the stroke-image property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-position">
   <a href="https://www.w3.org/TR/css3-background/#propdef-background-position">https://www.w3.org/TR/css3-background/#propdef-background-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position">3.3.4. Positioning Fill Images: the fill-position property</a>
    <li><a href="#ref-for-propdef-background-position①">4.4.4. Positioning Stroke Images: the stroke-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-repeat">
   <a href="https://www.w3.org/TR/css3-background/#propdef-background-repeat">https://www.w3.org/TR/css3-background/#propdef-background-repeat</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-repeat">3.3.6. Tiling Fill Images: the fill-repeat property</a>
    <li><a href="#ref-for-propdef-background-repeat①">4.4.6. Tiling Stroke Images: the stroke-repeat property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-size">
   <a href="https://www.w3.org/TR/css3-background/#propdef-background-size">https://www.w3.org/TR/css3-background/#propdef-background-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-size">3.3.5. Sizing Fill Images: the fill-size property</a>
    <li><a href="#ref-for-propdef-background-size①">4.4.5. Sizing Stroke Images: the stroke-size property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermEquivalentPath">
   <a href="https://www.w3.org/TR/svg2/paths.html#TermEquivalentPath">https://www.w3.org/TR/svg2/paths.html#TermEquivalentPath</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermEquivalentPath">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a>
    <li><a href="#ref-for-TermEquivalentPath①">4.6.2. Stroke Shape</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermObjectBoundingBox">
   <a href="https://www.w3.org/TR/svg2/coords.html#TermObjectBoundingBox">https://www.w3.org/TR/svg2/coords.html#TermObjectBoundingBox</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermObjectBoundingBox">3.3.3. Fill Positioning Area: the fill-origin property</a>
    <li><a href="#ref-for-TermObjectBoundingBox①">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermPaintServerElement">
   <a href="https://www.w3.org/TR/svg2/painting.html#TermPaintServerElement">https://www.w3.org/TR/svg2/painting.html#TermPaintServerElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermPaintServerElement">2.1. SVG-Specific Paints</a> <a href="#ref-for-TermPaintServerElement①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-PaintOrderProperty">
   <a href="https://www.w3.org/TR/svg2/painting.html#PaintOrderProperty">https://www.w3.org/TR/svg2/painting.html#PaintOrderProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-PaintOrderProperty">4. Strokes (Outlines)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-path">
   <a href="https://www.w3.org/TR/svg2/paths.html#elementdef-path">https://www.w3.org/TR/svg2/paths.html#elementdef-path</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-path">1. Introduction</a>
    <li><a href="#ref-for-elementdef-path①">4.2.3. Stroke End Shapes: the stroke-linecap property</a>
    <li><a href="#ref-for-elementdef-path②">4.6.1. Stroke Paths</a> <a href="#ref-for-elementdef-path③">(2)</a>
    <li><a href="#ref-for-elementdef-path④">4.6.2. Stroke Shape</a>
    <li><a href="#ref-for-elementdef-path⑤">4.6.3. Dash Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-pattern">
   <a href="https://www.w3.org/TR/svg2/pservers.html#elementdef-pattern">https://www.w3.org/TR/svg2/pservers.html#elementdef-pattern</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-pattern">4.6.1. Stroke Paths</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-rect">
   <a href="https://www.w3.org/TR/svg2/shapes.html#elementdef-rect">https://www.w3.org/TR/svg2/shapes.html#elementdef-rect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-rect">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermStrokeBoundingBox">
   <a href="https://www.w3.org/TR/svg2/coords.html#TermStrokeBoundingBox">https://www.w3.org/TR/svg2/coords.html#TermStrokeBoundingBox</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermStrokeBoundingBox">3.3.3. Fill Positioning Area: the fill-origin property</a>
    <li><a href="#ref-for-TermStrokeBoundingBox①">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-repeatable-list">
   <a href="https://www.w3.org/TR/web-animations-1/#repeatable-list">https://www.w3.org/TR/web-animations-1/#repeatable-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-repeatable-list">3.3.4. Positioning Fill Images: the fill-position property</a>
    <li><a href="#ref-for-repeatable-list①">3.3.5. Sizing Fill Images: the fill-size property</a>
    <li><a href="#ref-for-repeatable-list②">4.4.4. Positioning Stroke Images: the stroke-position property</a>
    <li><a href="#ref-for-repeatable-list③">4.4.5. Sizing Stroke Images: the stroke-size property</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-break-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-fragment" style="color:initial">fragment</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-box-decoration-break" style="color:initial">box-decoration-break</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-shorthand-property" style="color:initial">shorthand</span>
     <li><span class="dfn-paneled" id="term-for-cascade-origin-ua" style="color:initial">user agent style sheet</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-color" style="color:initial">color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-opacity" style="color:initial">opacity</span>
     <li><span class="dfn-paneled" id="term-for-valdef-color-transparent" style="color:initial">transparent</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-initial-containing-block" style="color:initial">initial containing block</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-images-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-funcdef-image" style="color:initial">image()</span>
     <li><span class="dfn-paneled" id="term-for-invalid-image" style="color:initial">invalid image</span>
     <li><span class="dfn-paneled" id="term-for-invalid-image①" style="color:initial">valid image</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-css-invalid" style="color:initial">invalid</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-decor-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-text-decoration" style="color:initial">text-decoration</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-integer-value" style="color:initial">&lt;integer></span>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-number-value" style="color:initial">&lt;number></span>
     <li><span class="dfn-paneled" id="term-for-url-value" style="color:initial">&lt;url></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-comma" style="color:initial">#</span>
     <li><span class="dfn-paneled" id="term-for-mult-one-plus" style="color:initial">+</span>
     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage" style="color:initial">&lt;length-percentage></span>
     <li><span class="dfn-paneled" id="term-for-typedef-position" style="color:initial">&lt;position></span>
     <li><span class="dfn-paneled" id="term-for-functional-notation" style="color:initial">functional notation</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
     <li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-COLOR]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valuea-def-color" style="color:initial">&lt;color></span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-IMAGES]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-image-type" style="color:initial">&lt;image></span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3BG]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-bg-size" style="color:initial">&lt;bg-size></span>
     <li><span class="dfn-paneled" id="term-for-typedef-repeat-style" style="color:initial">&lt;repeat-style></span>
     <li><span class="dfn-paneled" id="term-for-valdef-background-size-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background" style="color:initial">background</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-color" style="color:initial">background-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-image" style="color:initial">background-image</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-position" style="color:initial">background-position</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-repeat" style="color:initial">background-repeat</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-size" style="color:initial">background-size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-TermEquivalentPath" style="color:initial">equivalent path</span>
     <li><span class="dfn-paneled" id="term-for-TermObjectBoundingBox" style="color:initial">object bounding box</span>
     <li><span class="dfn-paneled" id="term-for-TermPaintServerElement" style="color:initial">paint server element</span>
     <li><span class="dfn-paneled" id="term-for-PaintOrderProperty" style="color:initial">paint-order</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-path" style="color:initial">path</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-pattern" style="color:initial">pattern</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-rect" style="color:initial">rect</span>
     <li><span class="dfn-paneled" id="term-for-TermStrokeBoundingBox" style="color:initial">stroke bounding box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[web-animations-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-repeatable-list" style="color:initial">repeatable list</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-break-3">[CSS-BREAK-3]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
   <dt id="biblio-css-break-4">[CSS-BREAK-4]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-images-4">[CSS-IMAGES-4]
   <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module Level 4</a>. 13 April 2017. WD. URL: <a href="https://www.w3.org/TR/css-images-4/">https://www.w3.org/TR/css-images-4/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-text-decor-3">[CSS-TEXT-DECOR-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>. 3 July 2018. CR. URL: <a href="https://www.w3.org/TR/css-text-decor-3/">https://www.w3.org/TR/css-text-decor-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css3-color">[CSS3-COLOR]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-css3bg">[CSS3BG]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
   <dt id="biblio-web-animations-1">[WEB-ANIMATIONS-1]
   <dd>Brian Birtles; et al. <a href="https://www.w3.org/TR/web-animations-1/">Web Animations</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Ani­mat­able
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
      <th scope="col">Media
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill" id="ref-for-propdef-fill⑨">fill</a>
      <td>&lt;'background'> with modifications
      <td>See individual properties
      <td>See individual properties
      <td>See individual properties
      <td>N/A
      <td>See individual properties
      <td>per grammar
      <td>See individual properties
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-break" id="ref-for-propdef-fill-break②">fill-break</a>
      <td>bounding-box | slice | clone
      <td>bounding-box
      <td>all elements
      <td>yes?
      <td>N/A
      <td>No
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-color" id="ref-for-propdef-fill-color⑥">fill-color</a>
      <td>&lt;color>
      <td>currentcolor
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>as color
      <td>per grammar
      <td>the computed color
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-image" id="ref-for-propdef-fill-image⑤">fill-image</a>
      <td>&lt;paint>#
      <td>none
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>as repeatable list of images
      <td>per grammar
      <td>as specified, with any &lt;image> computed
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-opacity" id="ref-for-propdef-fill-opacity②">fill-opacity</a>
      <td>&lt;'opacity'>
      <td>1
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>as number
      <td>per grammar
      <td>the specified value converted to a &lt;number>, clamped to the range [0,1]
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-origin" id="ref-for-propdef-fill-origin③">fill-origin</a>
      <td>match-parent | fill-box | stroke-box | content-box | padding-box | border-box
      <td>match-parent
      <td>all elements
      <td>no
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-position" id="ref-for-propdef-fill-position②">fill-position</a>
      <td>&lt;position>#
      <td>0% 0%
      <td>inline boxes and SVG shapes
      <td>yes
      <td>n/a
      <td>as repeatable list of simple list of length, percentage, or calc
      <td>per grammar
      <td>A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-repeat" id="ref-for-propdef-fill-repeat②">fill-repeat</a>
      <td>&lt;repeat-style>#
      <td>repeat
      <td>inline boxes and SVG shapes
      <td>yes
      <td>n/a
      <td>no
      <td>per grammar
      <td>A list, each item consisting of: two keywords, one per dimension
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-rule" id="ref-for-propdef-fill-rule③">fill-rule</a>
      <td>nonzero | evenodd
      <td>nonzero
      <td>SVG shapes
      <td>yes
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-fill-size" id="ref-for-propdef-fill-size②">fill-size</a>
      <td>&lt;bg-size>#
      <td>auto
      <td>inline boxes and SVG shapes
      <td>yes
      <td>n/a
      <td>as repeatable list of simple list of length, percentage, or calc
      <td>per grammar
      <td>as specified, but with lengths made absolute and omitted auto keywords filled in
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke" id="ref-for-propdef-stroke⑧">stroke</a>
      <td>&lt;'background'> with modifications
      <td>See individual properties
      <td>See individual properties
      <td>See individual properties
      <td>N/A
      <td>See individual properties
      <td>per grammar
      <td>See individual properties
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-align" id="ref-for-propdef-stroke-align⑧">stroke-align</a>
      <td>center | inset | outset
      <td>center
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-break" id="ref-for-propdef-stroke-break②">stroke-break</a>
      <td>bounding-box | slice | clone
      <td>bounding-box
      <td>all elements
      <td>?
      <td>N/A
      <td>No
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-color" id="ref-for-propdef-stroke-color⑧">stroke-color</a>
      <td>&lt;color>#
      <td>transparent
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>as color
      <td>per grammar
      <td>the computed color
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-dash-corner" id="ref-for-propdef-stroke-dash-corner⑦">stroke-dash-corner</a>
      <td>none | &lt;length>
      <td>none
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>yes, if &lt;length>
      <td>per grammar
      <td>specified value, with lengths made absolute
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-dash-justify" id="ref-for-propdef-stroke-dash-justify③">stroke-dash-justify</a>
      <td>none | [ stretch | compress ] || [ dashes || gaps ]
      <td>none
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>no
      <td>per grammar
      <td>specified value, with lengths made absolute
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-dasharray" id="ref-for-propdef-stroke-dasharray④">stroke-dasharray</a>
      <td>none | &lt;length-percentage>+#
      <td>none
      <td>inline boxes and SVG shapes
      <td>yes
      <td>relative to the scaled viewport size
      <td>as repeated list of length, percentage or calc
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-dashoffset" id="ref-for-propdef-stroke-dashoffset②">stroke-dashoffset</a>
      <td>&lt;length-percentage>
      <td>0
      <td>inline boxes and SVG shapes
      <td>yes
      <td>relative to the scaled viewport size
      <td>as repeated list of integers
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-image" id="ref-for-propdef-stroke-image⑦">stroke-image</a>
      <td>&lt;paint>#
      <td>none
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>as repeatable list of images
      <td>per grammar
      <td>as specified, with any &lt;image> computed
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-linecap" id="ref-for-propdef-stroke-linecap⑦">stroke-linecap</a>
      <td>butt | round | square
      <td>butt
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-linejoin" id="ref-for-propdef-stroke-linejoin⑧">stroke-linejoin</a>
      <td>[ crop | arcs | miter ] || [ bevel | round | fallback ]
      <td>miter
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-miterlimit" id="ref-for-propdef-stroke-miterlimit⑥">stroke-miterlimit</a>
      <td>&lt;number>
      <td>4
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>no
      <td>per grammar
      <td>a number
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-opacity" id="ref-for-propdef-stroke-opacity②">stroke-opacity</a>
      <td>&lt;'opacity'>
      <td>1
      <td>inline boxes and SVG shapes
      <td>yes
      <td>N/A
      <td>as number
      <td>per grammar
      <td>the specified value converted to a &lt;number>, clamped to the range [0,1]
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-origin" id="ref-for-propdef-stroke-origin③">stroke-origin</a>
      <td>match-parent | fill-box | stroke-box | content-box | padding-box | border-box
      <td>match-parent
      <td>all elements
      <td>no
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-position" id="ref-for-propdef-stroke-position②">stroke-position</a>
      <td>&lt;position>#
      <td>0% 0%
      <td>inline boxes and SVG shapes
      <td>yes
      <td>n/a
      <td>as repeatable list of simple list of length, percentage, or calc
      <td>per grammar
      <td>A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-repeat" id="ref-for-propdef-stroke-repeat②">stroke-repeat</a>
      <td>&lt;repeat-style>#
      <td>repeat
      <td>inline boxes and SVG shapes
      <td>yes
      <td>n/a
      <td>no
      <td>per grammar
      <td>A list, each item consisting of: two keywords, one per dimension
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-size" id="ref-for-propdef-stroke-size②">stroke-size</a>
      <td>&lt;bg-size>#
      <td>auto
      <td>inline boxes and SVG shapes
      <td>yes
      <td>n/a
      <td>as repeatable list of simple list of length, percentage, or calc
      <td>per grammar
      <td>as specified, but with lengths made absolute and omitted auto keywords filled in
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-stroke-width" id="ref-for-propdef-stroke-width①④">stroke-width</a>
      <td>&lt;length-percentage>#
      <td>1px
      <td>inline boxes and SVG shapes
      <td>yes
      <td>relative to the scaled viewport size
      <td>as &lt;length-percentage>
      <td>per grammar
      <td>the absolute length, or percentage
      <td>visual
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Insert <a href="https://svgwg.org/svg2-draft/painting.html#SpecifyingPaint">Specifying Paint from SVG2</a>.<a href="#issue-d13fcf01"> ↵ </a></div>
   <div class="issue"> Deal with text decoration. See <a href="https://www.w3.org/mid/20160422204811.GA17804@pescadero.dbaron.org">issue</a> and <a href="https://www.w3.org/mid/1400592192.22096.52.camel@localhost.localdomain">other issue</a>.<a href="#issue-0349dccc"> ↵ </a></div>
   <div class="issue"> <a href="https://github.com/w3c/csswg-drafts/issues/383">&lt;https://github.com/w3c/csswg-drafts/issues/383></a><a href="#issue-d41d8cd9"> ↵ </a></div>
   <div class="issue"> <span class="css">context-fill</span> and <span class="css">context-stroke</span> need to be worked into the spec,
	but they belong as keywords on each individual <a class="property" data-link-type="propdesc" href="#propdef-stroke">stroke</a> and <a class="property" data-link-type="propdesc" href="#propdef-fill">fill</a> sub-property,
	not as a <a class="production css" data-link-type="type" href="#typedef-paint" title="Expands to: none">&lt;paint></a> value.
	Needs more WG discussion,
	and confirmation that this is an SVG2 feature that will be kept,
	before we do the relatively substantial edits for it.<a href="#issue-befd2a50"> ↵ </a></div>
   <div class="issue"> <a href="https://www.w3.org/TR/css4-images/#paint-sources">CSS Images 4 §2.6.1 Paint Sources</a> defines how to handle SVG paint server coordinate spaces.
	Copy, ref, or something else here?<a href="#issue-04ca3f73"> ↵ </a></div>
   <div class="issue"> Add a <span class="css">box-break</span> property that is a shorthand for <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break">box-decoration-break</a>, <a class="property" data-link-type="propdesc" href="#propdef-fill-break">fill-break</a>, and <a class="property" data-link-type="propdesc" href="#propdef-stroke-break">stroke-break</a>?<a href="#issue-7b241059"> ↵ </a></div>
   <div class="issue"> Should this be layerized?<a href="#issue-45d6cd25"> ↵ </a></div>
   <div class="issue"> <a class="property" data-link-type="propdesc" href="#propdef-fill-color">fill-color</a> should be layerized, like <a class="property" data-link-type="propdesc" href="#propdef-stroke-color">stroke-color</a>,
	so the two sets of properties are maximally consistent.<a href="#issue-30b78afa"> ↵ </a></div>
   <div class="issue"> SVG paint servers carry around their own originator information in *Units attributes,
	but maybe SVGWG can add a new value that makes them pay attention to the CSS originator.
	Alternately, we can add an <span class="css">auto</span> initial value here,
	which defers to the paint server’s information
	if you’re referring to one,
	and otherwise is <a class="css" data-link-type="maybe" href="#valdef-fill-origin-match-parent">match-parent</a>.<a href="#issue-8b7a4ffb"> ↵ </a></div>
   <div class="issue"> What should be the default value for fill-origin when set via this shorthand?
	content-box or fill-box?
	fill-box works better for fancy/overflowing fonts like Zapfino,
	but it’s much more expensive to calculate than content-box.<a href="#issue-18dac41b"> ↵ </a></div>
   <div class="issue"> SVG has special color fallback syntax—<wbr>a color following an image is only drawn if the image fails.
	This conflicts with our desire to match <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background">background</a>,
	because <a class="css" data-link-type="propdesc" href="#propdef-fill">fill: url(#foo) red;</a> does *not* fill with red and then draw #foo.
	Compromise: fill-color is a fallback color,
	but both <span class="css">none</span> and <a data-link-type="dfn" href="https://www.w3.org/TR/css4-images/#invalid-image">invalid images</a> trigger the fallback.
	So <span class="css">fill: url(#foo) red;</span> will only draw the red if there is no #foo (like SVG),
	but <span class="css">fill: url(#foo), red</span> (equivalent to <span class="css">none red</span> on the last layer)
	will draw the red <em>and</em> the #foo (like <span class="property">background</span>).<a href="#issue-c25d18b5"> ↵ </a></div>
   <div class="issue"> <a class="property" data-link-type="propdesc" href="#propdef-stroke-color">stroke-color</a> must front-fill with <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent">transparent</a>,
	otherwise multiple image layers will randomly fall back to solid colors
	if the image fails to load.
	Do we want to have strokes and fills front-fill with initial values in general,
	or should the rest of these properties repeat their lists as they do for backgrounds?<a href="#issue-3d7e0f3e"> ↵ </a></div>
   <div class="issue"> We currently layerize the stroke paint props, and <a class="property" data-link-type="propdesc" href="#propdef-stroke-width">stroke-width</a>,
	per SVGWG resolution.
	Should we layerize the other geometry properties?
	They have similar use-cases,
	albeit somewhat more niche,
	and consistency in API is important.
	Worth the implementation/testing effort?
	Hard case: <a class="property" data-link-type="propdesc" href="#propdef-stroke-dasharray">stroke-dasharray</a>,
	because it has "commas anywhere lol" syntax.<a href="#issue-b606844c"> ↵ </a></div>
   <div class="issue"> Why is <a class="property" data-link-type="propdesc" href="#propdef-stroke-linejoin">stroke-linejoin</a> ignored?
			It’s still needed for interior corners.<a href="#issue-1627f4e7"> ↵ </a></div>
   <div class="issue">
     Text is easy, as are simple closed, non-self-intersecting paths,
		but the other categories exist and need good definitions. 
    <p>How does this apply to open path segments?
		One suggestion is to alias <a class="css" data-link-type="maybe" href="#valdef-stroke-align-outset">outset</a> to <span class="css">left</span> and <a class="css" data-link-type="maybe" href="#valdef-stroke-align-inset">inset</a> to <span class="css">right</span> for open paths.
		How are end caps handled?</p>
    <figure>
      <img src="images/stroke-align-open-path.svg"> 
     <figcaption>
      <ol>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-center">center</a> value.</p>
       <li data-md>
        <p>Fill region.</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-inset">inset</a> value per spec (? stroke only paints inside fill region).</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-outset">outset</a> value (implemented by blocking out fill region).</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-inset">inset</a> value, alternative interpretation.</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align">stroke-align</a> <a class="css" data-link-type="maybe" href="#valdef-stroke-align-outset">outset</a> value per spec (?).</p>
       <li data-md>
        <p>Stroke with <a class="property" data-link-type="propdesc" href="#propdef-stroke-align">stroke-align</a> alternative <span class="css">left</span> value; pink shows round line-cap.</p>
      </ol>
     </figcaption>
    </figure>
    <p>How does this apply to paths with loops?
		Is the region inside the red circle in the below figure part of the stroked (as shown)?
		Are internal edges stroked if the fill rule is <a class="css" data-link-type="maybe" href="#valdef-fill-rule-nonzero">nonzero</a>; if so how?
		(Shown without stroking below.)</p>
    <figure>
      <img src="images/stroke-align-intersecting-path.svg"> 
     <figcaption>
      <ul>
       <li data-md>
        <p>Top row: Normal stroke. Stroke left. Stroke right.</p>
       <li data-md>
        <p>Middle row: Fill rule <a class="css" data-link-type="maybe" href="#valdef-fill-rule-nonzero">nonzero</a>, no stroke. Stroke outside. Stroke inside.</p>
       <li data-md>
        <p>Bottom row: Fill rule <a class="css" data-link-type="maybe" href="#valdef-fill-rule-evenodd">evenodd</a>, no stroke. Stroke outside. Stroke inside.</p>
      </ul>
     </figcaption>
    </figure>
    <p>How are dashes handled? Are they based on original path?</p>
    <figure>
      <img src="images/stroke-align-dashes.svg"> 
     <figcaption>
      <ol>
       <li data-md>
        <p>Normal dash pattern.</p>
       <li data-md>
        <p>Dash pattern based on dash pattern or original path.
Note light-gray region which is from inside dash part
(simply using clipping path does not yield proper result).</p>
       <li data-md>
        <p>Dash pattern based on center of offset path.
Light gray represents dash pattern based on center of inset path.</p>
      </ol>
     </figcaption>
    </figure>
     <a href="#issue-70831a2b"> ↵ </a>
   </div>
   <div class="issue"> Adding a rectangle to the end of dashes on a curved outline looks bad.
			It should just extend the dash by <a class="property" data-link-type="propdesc" href="#propdef-stroke-width">stroke-width</a>/2,
			following the outline.<a href="#issue-f2ad6e96"> ↵ </a></div>
   <div class="issue"> Can we just remove <a class="css" data-link-type="maybe" href="#valdef-stroke-linejoin-fallback">fallback</a>?
			It’s a stupid value,
			useful only because we didn’t have the clip-at-miterlimit behavior in SVG1.
			Question is if people are mostly just *accidentally* getting the bevel behavior right now,
			and would be okay with their joins extending up to the miterlimit
			and only getting the excess corners clipped,
			or if they actually wanted the discontinuous behavior currently specified. <a href="http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Csvg%3E%0A%20%20%3Cpath%20fill%3Dnone%20stroke%3Dblack%20stroke-width%3D10%20d%3D%22M%2010%2010%20h%20100%20l%20-100%2055%22%20%2F%3E%0A%20%20%3Cpath%20fill%3Dnone%20stroke%3Dblack%20stroke-width%3D10%20d%3D%22M%2010%2050%20h%20100%20l%20-100%2056deg%22%20%2F%3E"> The breakpoint is between 29 and 30 degrees. </a><a href="#issue-4eb049cf"> ↵ </a></div>
   <div class="issue"> Should we add angles?
	The miterlimit number has physical justification,
	but it’s difficult to understand without experimentation.<a href="#issue-623ed3a5"> ↵ </a></div>
   <div class="issue"> SVG allows comma separation. Do we need to allow this in CSS for back-compat? (Please say no.)<a href="#issue-450f986b"> ↵ </a></div>
   <div class="issue"> Need a way to specify dash lengths relative to the width of the stroke.
	(For instance, to do square dashes.)<a href="#issue-2ee1265c"> ↵ </a></div>
   <div class="issue"> Need a way to specify dash lengths relative to the length of the path.
	(For instance, to do the "self-drawing SVG" thing without script.)<a href="#issue-144df544"> ↵ </a></div>
   <div class="issue"> Should the corner dash at the first and last vertex of an open shape
	be half the length of the others?
	Should this be author controllable?<a href="#issue-0f052988"> ↵ </a></div>
   <div class="issue"> Should there be a way to specify a padding,
	so that any dash pattern between the corner dashes
	does not not run up against them?<a href="#issue-ae05e8d7"> ↵ </a></div>
   <div class="issue"> The corner needs to take over the role of the first dash in the dash pattern,
	so the "interior" of each segment starts and ends with a gap.
	Automatically skip the first dash in the pattern in each segment?<a href="#issue-41745b7c"> ↵ </a></div>
   <div class="issue"> Keyword to use the length of the first dash as the corner.<a href="#issue-5cc7adcf"> ↵ </a></div>
   <div class="issue"> Need to define what happens when corner dashes would overlap.<a href="#issue-fda43f2e"> ↵ </a></div>
   <div class="issue"> Should we auto-trigger justification when this property is active?
	Without it, you’ll get some dumb-looking results by default.<a href="#issue-1a500326"> ↵ </a></div>
   <div class="issue"> Default should probably be to adjust the gaps only.<a href="#issue-2eae2333"> ↵ </a></div>
   <div class="issue"> Should it center the segment when it’s too long?<a href="#issue-08b79da6"> ↵ </a></div>
   <div class="issue"> Do we want to allow control of whether the stroke ends with a dash or with a gap?
	For a closed path,
	you probably want a gap at the end,
	while for an open path,
	a dash at the end is probably better.
	Maybe omit control for this,
	and just do it automatically based on whether the path is closed?<a href="#issue-e270edfd"> ↵ </a></div>
   <div class="issue"> SVG paint servers carry around their own originator information in *Units attributes,
	but maybe SVGWG can add a new value that makes them pay attention to the CSS originator.
	Alternately, we can add an <span class="css">auto</span> initial value here,
	which defers to the paint server’s information
	if you’re referring to one,
	and otherwise is <a class="css" data-link-type="maybe" href="#valdef-stroke-origin-match-parent">match-parent</a>.<a href="#issue-8b7a4ffb①"> ↵ </a></div>
   <div class="issue"> This should be redundant with the stroke shape computation requirements below.
	In this section, we should phrase the requirements descriptively rather than normatively.<a href="#issue-107516c1"> ↵ </a></div>
   <div class="issue"> This section doesn’t handle <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-corner">stroke-dash-corner</a> and <a class="property" data-link-type="propdesc" href="#propdef-stroke-dash-justify">stroke-dash-justify</a> yet.<a href="#issue-2553a54b"> ↵ </a></div>
   <div class="issue"> These should definitely be at-risk,
	possibly deferred to the next level.<a href="#issue-c8b0ec40"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="typedef-paint">
   <b><a href="#typedef-paint">#typedef-paint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-paint">2. Paint</a>
    <li><a href="#ref-for-typedef-paint①">2.1. SVG-Specific Paints</a>
    <li><a href="#ref-for-typedef-paint②">3.3.2. Fill Image Sources: the fill-image property</a>
    <li><a href="#ref-for-typedef-paint③">4.4.2. Stroke Image Sources: the stroke-image property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-paint-none">
   <b><a href="#valdef-paint-none">#valdef-paint-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-paint-none">2.1. SVG-Specific Paints</a> <a href="#ref-for-valdef-paint-none①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-svg-paint">
   <b><a href="#typedef-svg-paint">#typedef-svg-paint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-svg-paint">2. Paint</a> <a href="#ref-for-typedef-svg-paint①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fill">
   <b><a href="#fill">#fill</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fill">3. Fills</a> <a href="#ref-for-fill①">(2)</a>
    <li><a href="#ref-for-fill②">3.2.2. Fragmented Fills: the fill-break property</a>
    <li><a href="#ref-for-fill③">3.3.3. Fill Positioning Area: the fill-origin property</a>
    <li><a href="#ref-for-fill④">4. Strokes (Outlines)</a> <a href="#ref-for-fill⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-rule">
   <b><a href="#propdef-fill-rule">#propdef-fill-rule</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-rule">3.2.1. Winding Rule for SVG shapes: the fill-rule property</a> <a href="#ref-for-propdef-fill-rule①">(2)</a> <a href="#ref-for-propdef-fill-rule②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-fill-rule-nonzero">
   <b><a href="#valdef-fill-rule-nonzero">#valdef-fill-rule-nonzero</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-fill-rule-nonzero">4.2.2. Stroke Positioning: the stroke-align property</a> <a href="#ref-for-valdef-fill-rule-nonzero①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-fill-rule-evenodd">
   <b><a href="#valdef-fill-rule-evenodd">#valdef-fill-rule-evenodd</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-fill-rule-evenodd">4.2.2. Stroke Positioning: the stroke-align property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-break">
   <b><a href="#propdef-fill-break">#propdef-fill-break</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-break">3. Fills</a>
    <li><a href="#ref-for-propdef-fill-break①">3.2.2. Fragmented Fills: the fill-break property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-color">
   <b><a href="#propdef-fill-color">#propdef-fill-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-color">3. Fills</a>
    <li><a href="#ref-for-propdef-fill-color①">3.3.1. Fill Color: the fill-color property</a> <a href="#ref-for-propdef-fill-color②">(2)</a> <a href="#ref-for-propdef-fill-color③">(3)</a>
    <li><a href="#ref-for-propdef-fill-color④">3.3.7. Fill Shorthand: the fill property</a> <a href="#ref-for-propdef-fill-color⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-image">
   <b><a href="#propdef-fill-image">#propdef-fill-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-image">3. Fills</a>
    <li><a href="#ref-for-propdef-fill-image①">3.1. Layering Multiple Fills</a>
    <li><a href="#ref-for-propdef-fill-image②">3.3.1. Fill Color: the fill-color property</a>
    <li><a href="#ref-for-propdef-fill-image③">3.3.2. Fill Image Sources: the fill-image property</a>
    <li><a href="#ref-for-propdef-fill-image④">3.3.7. Fill Shorthand: the fill property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-origin">
   <b><a href="#propdef-fill-origin">#propdef-fill-origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-origin">3.3.3. Fill Positioning Area: the fill-origin property</a>
    <li><a href="#ref-for-propdef-fill-origin①">3.3.7. Fill Shorthand: the fill property</a> <a href="#ref-for-propdef-fill-origin②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fill-positioning-area">
   <b><a href="#fill-positioning-area">#fill-positioning-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fill-positioning-area">3.3.3. Fill Positioning Area: the fill-origin property</a> <a href="#ref-for-fill-positioning-area①">(2)</a>
    <li><a href="#ref-for-fill-positioning-area②">3.3.4. Positioning Fill Images: the fill-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-fill-origin-match-parent">
   <b><a href="#valdef-fill-origin-match-parent">#valdef-fill-origin-match-parent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-fill-origin-match-parent">3.3.3. Fill Positioning Area: the fill-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-fill-origin-content-box">
   <b><a href="#valdef-fill-origin-content-box">#valdef-fill-origin-content-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-fill-origin-content-box">3.3.3. Fill Positioning Area: the fill-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-fill-origin-padding-box">
   <b><a href="#valdef-fill-origin-padding-box">#valdef-fill-origin-padding-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-fill-origin-padding-box">3.3.3. Fill Positioning Area: the fill-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-fill-origin-border-box">
   <b><a href="#valdef-fill-origin-border-box">#valdef-fill-origin-border-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-fill-origin-border-box">3.3.3. Fill Positioning Area: the fill-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-fill-origin-fill-box">
   <b><a href="#valdef-fill-origin-fill-box">#valdef-fill-origin-fill-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-fill-origin-fill-box">3.3.3. Fill Positioning Area: the fill-origin property</a>
    <li><a href="#ref-for-valdef-fill-origin-fill-box①">3.3.7. Fill Shorthand: the fill property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-fill-origin-stroke-box">
   <b><a href="#valdef-fill-origin-stroke-box">#valdef-fill-origin-stroke-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-fill-origin-stroke-box">3.3.3. Fill Positioning Area: the fill-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-position">
   <b><a href="#propdef-fill-position">#propdef-fill-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-position">3.3.4. Positioning Fill Images: the fill-position property</a>
    <li><a href="#ref-for-propdef-fill-position①">3.3.7. Fill Shorthand: the fill property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-size">
   <b><a href="#propdef-fill-size">#propdef-fill-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-size">3.3.5. Sizing Fill Images: the fill-size property</a>
    <li><a href="#ref-for-propdef-fill-size①">3.3.7. Fill Shorthand: the fill property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-repeat">
   <b><a href="#propdef-fill-repeat">#propdef-fill-repeat</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-repeat">3.3.6. Tiling Fill Images: the fill-repeat property</a>
    <li><a href="#ref-for-propdef-fill-repeat①">3.3.7. Fill Shorthand: the fill property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill">
   <b><a href="#propdef-fill">#propdef-fill</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill">2.1. SVG-Specific Paints</a>
    <li><a href="#ref-for-propdef-fill①">3. Fills</a>
    <li><a href="#ref-for-propdef-fill②">3.3.1. Fill Color: the fill-color property</a>
    <li><a href="#ref-for-propdef-fill③">3.3.7. Fill Shorthand: the fill property</a> <a href="#ref-for-propdef-fill④">(2)</a> <a href="#ref-for-propdef-fill⑤">(3)</a> <a href="#ref-for-propdef-fill⑥">(4)</a>
    <li><a href="#ref-for-propdef-fill⑦">5. Text Decoration Fills and Strokes</a> <a href="#ref-for-propdef-fill⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-fill-opacity">
   <b><a href="#propdef-fill-opacity">#propdef-fill-opacity</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-fill-opacity">3.4.1. Fill Opacity: the fill-opacity property</a> <a href="#ref-for-propdef-fill-opacity①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stroke">
   <b><a href="#stroke">#stroke</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stroke">4. Strokes (Outlines)</a> <a href="#ref-for-stroke①">(2)</a> <a href="#ref-for-stroke②">(3)</a>
    <li><a href="#ref-for-stroke③">4.2.2. Stroke Positioning: the stroke-align property</a>
    <li><a href="#ref-for-stroke④">4.2.6. Fragmented Strokes: the stroke-break property</a>
    <li><a href="#ref-for-stroke⑤">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-width">
   <b><a href="#propdef-stroke-width">#propdef-stroke-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-width">4.2. Stroke Geometry</a>
    <li><a href="#ref-for-propdef-stroke-width①">4.2.1. Stroke Thickness: the stroke-width property</a>
    <li><a href="#ref-for-propdef-stroke-width②">4.2.3. Stroke End Shapes: the stroke-linecap property</a>
    <li><a href="#ref-for-propdef-stroke-width③">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a> <a href="#ref-for-propdef-stroke-width④">(2)</a>
    <li><a href="#ref-for-propdef-stroke-width⑤">4.6.4. Cap Shapes</a> <a href="#ref-for-propdef-stroke-width⑥">(2)</a> <a href="#ref-for-propdef-stroke-width⑦">(3)</a> <a href="#ref-for-propdef-stroke-width⑧">(4)</a> <a href="#ref-for-propdef-stroke-width⑨">(5)</a>
    <li><a href="#ref-for-propdef-stroke-width①⓪">4.6.5. Line Join Shape</a> <a href="#ref-for-propdef-stroke-width①①">(2)</a> <a href="#ref-for-propdef-stroke-width①②">(3)</a>
    <li><a href="#ref-for-propdef-stroke-width①③">4.6.6. Arcs Linejoin</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="scaled-viewport-size">
   <b><a href="#scaled-viewport-size">#scaled-viewport-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scaled-viewport-size">4.2.1. Stroke Thickness: the stroke-width property</a>
    <li><a href="#ref-for-scaled-viewport-size①">4.3.1. Stroke Dash Patterns: the stroke-dasharray property</a>
    <li><a href="#ref-for-scaled-viewport-size②">4.3.2. Stroke Dash Start Position: the stroke-dashoffset property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-align">
   <b><a href="#propdef-stroke-align">#propdef-stroke-align</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-align">4.2.2. Stroke Positioning: the stroke-align property</a> <a href="#ref-for-propdef-stroke-align①">(2)</a> <a href="#ref-for-propdef-stroke-align②">(3)</a> <a href="#ref-for-propdef-stroke-align③">(4)</a> <a href="#ref-for-propdef-stroke-align④">(5)</a> <a href="#ref-for-propdef-stroke-align⑤">(6)</a> <a href="#ref-for-propdef-stroke-align⑥">(7)</a>
    <li><a href="#ref-for-propdef-stroke-align⑦">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-align-center">
   <b><a href="#valdef-stroke-align-center">#valdef-stroke-align-center</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-align-center">4.2.2. Stroke Positioning: the stroke-align property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-align-inset">
   <b><a href="#valdef-stroke-align-inset">#valdef-stroke-align-inset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-align-inset">4.2.2. Stroke Positioning: the stroke-align property</a> <a href="#ref-for-valdef-stroke-align-inset①">(2)</a> <a href="#ref-for-valdef-stroke-align-inset②">(3)</a>
    <li><a href="#ref-for-valdef-stroke-align-inset③">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-align-outset">
   <b><a href="#valdef-stroke-align-outset">#valdef-stroke-align-outset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-align-outset">4.2.2. Stroke Positioning: the stroke-align property</a> <a href="#ref-for-valdef-stroke-align-outset①">(2)</a> <a href="#ref-for-valdef-stroke-align-outset②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-linecap">
   <b><a href="#propdef-stroke-linecap">#propdef-stroke-linecap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-linecap">4.2.3. Stroke End Shapes: the stroke-linecap property</a> <a href="#ref-for-propdef-stroke-linecap①">(2)</a>
    <li><a href="#ref-for-propdef-stroke-linecap②">4.6.1. Stroke Paths</a> <a href="#ref-for-propdef-stroke-linecap③">(2)</a>
    <li><a href="#ref-for-propdef-stroke-linecap④">4.6.4. Cap Shapes</a> <a href="#ref-for-propdef-stroke-linecap⑤">(2)</a> <a href="#ref-for-propdef-stroke-linecap⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linecap-butt">
   <b><a href="#valdef-stroke-linecap-butt">#valdef-stroke-linecap-butt</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linecap-butt">4.6.1. Stroke Paths</a>
    <li><a href="#ref-for-valdef-stroke-linecap-butt①">4.6.4. Cap Shapes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linecap-round">
   <b><a href="#valdef-stroke-linecap-round">#valdef-stroke-linecap-round</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linecap-round">4.6.1. Stroke Paths</a>
    <li><a href="#ref-for-valdef-stroke-linecap-round①">4.6.4. Cap Shapes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linecap-square">
   <b><a href="#valdef-stroke-linecap-square">#valdef-stroke-linecap-square</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linecap-square">4.6.1. Stroke Paths</a>
    <li><a href="#ref-for-valdef-stroke-linecap-square①">4.6.4. Cap Shapes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-linejoin">
   <b><a href="#propdef-stroke-linejoin">#propdef-stroke-linejoin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-linejoin">4.2.2. Stroke Positioning: the stroke-align property</a> <a href="#ref-for-propdef-stroke-linejoin①">(2)</a>
    <li><a href="#ref-for-propdef-stroke-linejoin②">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a> <a href="#ref-for-propdef-stroke-linejoin③">(2)</a>
    <li><a href="#ref-for-propdef-stroke-linejoin④">4.6.5. Line Join Shape</a> <a href="#ref-for-propdef-stroke-linejoin⑤">(2)</a> <a href="#ref-for-propdef-stroke-linejoin⑥">(3)</a> <a href="#ref-for-propdef-stroke-linejoin⑦">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linejoin-crop">
   <b><a href="#valdef-stroke-linejoin-crop">#valdef-stroke-linejoin-crop</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linejoin-crop">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linejoin-miter">
   <b><a href="#valdef-stroke-linejoin-miter">#valdef-stroke-linejoin-miter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linejoin-miter">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a>
    <li><a href="#ref-for-valdef-stroke-linejoin-miter①">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a> <a href="#ref-for-valdef-stroke-linejoin-miter②">(2)</a>
    <li><a href="#ref-for-valdef-stroke-linejoin-miter③">4.6.5. Line Join Shape</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linejoin-arcs">
   <b><a href="#valdef-stroke-linejoin-arcs">#valdef-stroke-linejoin-arcs</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linejoin-arcs">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a> <a href="#ref-for-valdef-stroke-linejoin-arcs①">(2)</a>
    <li><a href="#ref-for-valdef-stroke-linejoin-arcs②">4.6.5. Line Join Shape</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linejoin-bevel">
   <b><a href="#valdef-stroke-linejoin-bevel">#valdef-stroke-linejoin-bevel</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linejoin-bevel">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linejoin-round">
   <b><a href="#valdef-stroke-linejoin-round">#valdef-stroke-linejoin-round</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linejoin-round">4.6.5. Line Join Shape</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-linejoin-fallback">
   <b><a href="#valdef-stroke-linejoin-fallback">#valdef-stroke-linejoin-fallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linejoin-fallback">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a> <a href="#ref-for-valdef-stroke-linejoin-fallback①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-miterlimit">
   <b><a href="#propdef-stroke-miterlimit">#propdef-stroke-miterlimit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-miterlimit">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a> <a href="#ref-for-propdef-stroke-miterlimit①">(2)</a> <a href="#ref-for-propdef-stroke-miterlimit②">(3)</a> <a href="#ref-for-propdef-stroke-miterlimit③">(4)</a>
    <li><a href="#ref-for-propdef-stroke-miterlimit④">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a>
    <li><a href="#ref-for-propdef-stroke-miterlimit⑤">4.6.5. Line Join Shape</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="--corner-diagonal">
   <b><a href="#--corner-diagonal">#--corner-diagonal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for---corner-diagonal">4.2.4. Stroke Corner Shapes: the stroke-linejoin property</a>
    <li><a href="#ref-for---corner-diagonal①">4.2.5. Stroke Corner Limits: the stroke-miterlimit property</a> <a href="#ref-for---corner-diagonal②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-break">
   <b><a href="#propdef-stroke-break">#propdef-stroke-break</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-break">3. Fills</a>
    <li><a href="#ref-for-propdef-stroke-break①">4.2.6. Fragmented Strokes: the stroke-break property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-dasharray">
   <b><a href="#propdef-stroke-dasharray">#propdef-stroke-dasharray</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-dasharray">4.2. Stroke Geometry</a>
    <li><a href="#ref-for-propdef-stroke-dasharray①">4.3.1. Stroke Dash Patterns: the stroke-dasharray property</a>
    <li><a href="#ref-for-propdef-stroke-dasharray②">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a>
    <li><a href="#ref-for-propdef-stroke-dasharray③">4.6.3. Dash Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-dasharray-none">
   <b><a href="#valdef-stroke-dasharray-none">#valdef-stroke-dasharray-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-dasharray-none">4.3.1. Stroke Dash Patterns: the stroke-dasharray property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-dashoffset">
   <b><a href="#propdef-stroke-dashoffset">#propdef-stroke-dashoffset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-dashoffset">4.3.2. Stroke Dash Start Position: the stroke-dashoffset property</a>
    <li><a href="#ref-for-propdef-stroke-dashoffset①">4.6.3. Dash Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-dash-corner">
   <b><a href="#propdef-stroke-dash-corner">#propdef-stroke-dash-corner</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-dash-corner">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a> <a href="#ref-for-propdef-stroke-dash-corner①">(2)</a> <a href="#ref-for-propdef-stroke-dash-corner②">(3)</a> <a href="#ref-for-propdef-stroke-dash-corner③">(4)</a> <a href="#ref-for-propdef-stroke-dash-corner④">(5)</a> <a href="#ref-for-propdef-stroke-dash-corner⑤">(6)</a>
    <li><a href="#ref-for-propdef-stroke-dash-corner⑥">4.6.3. Dash Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-dash-corner-none">
   <b><a href="#valdef-stroke-dash-corner-none">#valdef-stroke-dash-corner-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-dash-corner-none">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a> <a href="#ref-for-valdef-stroke-dash-corner-none①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-dash-justify">
   <b><a href="#propdef-stroke-dash-justify">#propdef-stroke-dash-justify</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-dash-justify">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a> <a href="#ref-for-propdef-stroke-dash-justify①">(2)</a>
    <li><a href="#ref-for-propdef-stroke-dash-justify②">4.6.3. Dash Positions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-dash-justify-stretch">
   <b><a href="#valdef-stroke-dash-justify-stretch">#valdef-stroke-dash-justify-stretch</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-dash-justify-stretch">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a> <a href="#ref-for-valdef-stroke-dash-justify-stretch①">(2)</a> <a href="#ref-for-valdef-stroke-dash-justify-stretch②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-dash-justify-compress">
   <b><a href="#valdef-stroke-dash-justify-compress">#valdef-stroke-dash-justify-compress</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-dash-justify-compress">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a> <a href="#ref-for-valdef-stroke-dash-justify-compress①">(2)</a> <a href="#ref-for-valdef-stroke-dash-justify-compress②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-dash-justify-dashes">
   <b><a href="#valdef-stroke-dash-justify-dashes">#valdef-stroke-dash-justify-dashes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-dash-justify-dashes">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-dash-justify-gaps">
   <b><a href="#valdef-stroke-dash-justify-gaps">#valdef-stroke-dash-justify-gaps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-dash-justify-gaps">4.3.3. Corner Control: the stroke-dash-corner and stroke-dash-justify properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-color">
   <b><a href="#propdef-stroke-color">#propdef-stroke-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-color">3.3.1. Fill Color: the fill-color property</a>
    <li><a href="#ref-for-propdef-stroke-color①">4. Strokes (Outlines)</a>
    <li><a href="#ref-for-propdef-stroke-color②">4.1. Layering Multiple Strokes</a> <a href="#ref-for-propdef-stroke-color③">(2)</a> <a href="#ref-for-propdef-stroke-color④">(3)</a>
    <li><a href="#ref-for-propdef-stroke-color⑤">4.4.1. Stroke Color: the stroke-color property</a>
    <li><a href="#ref-for-propdef-stroke-color⑥">4.4.7. Stroke Shorthand: the stroke property</a> <a href="#ref-for-propdef-stroke-color⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-image">
   <b><a href="#propdef-stroke-image">#propdef-stroke-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-image">4. Strokes (Outlines)</a>
    <li><a href="#ref-for-propdef-stroke-image①">4.1. Layering Multiple Strokes</a> <a href="#ref-for-propdef-stroke-image②">(2)</a>
    <li><a href="#ref-for-propdef-stroke-image③">4.4.1. Stroke Color: the stroke-color property</a> <a href="#ref-for-propdef-stroke-image④">(2)</a>
    <li><a href="#ref-for-propdef-stroke-image⑤">4.4.2. Stroke Image Sources: the stroke-image property</a>
    <li><a href="#ref-for-propdef-stroke-image⑥">4.4.7. Stroke Shorthand: the stroke property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-origin">
   <b><a href="#propdef-stroke-origin">#propdef-stroke-origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-origin">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
    <li><a href="#ref-for-propdef-stroke-origin①">4.4.7. Stroke Shorthand: the stroke property</a> <a href="#ref-for-propdef-stroke-origin②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stroke-positioning-area">
   <b><a href="#stroke-positioning-area">#stroke-positioning-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stroke-positioning-area">4.4.3. Stroke Positioning Area: the stroke-origin property</a> <a href="#ref-for-stroke-positioning-area①">(2)</a>
    <li><a href="#ref-for-stroke-positioning-area②">4.4.4. Positioning Stroke Images: the stroke-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-origin-match-parent">
   <b><a href="#valdef-stroke-origin-match-parent">#valdef-stroke-origin-match-parent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-origin-match-parent">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-origin-content-box">
   <b><a href="#valdef-stroke-origin-content-box">#valdef-stroke-origin-content-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-origin-content-box">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-origin-padding-box">
   <b><a href="#valdef-stroke-origin-padding-box">#valdef-stroke-origin-padding-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-origin-padding-box">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-origin-border-box">
   <b><a href="#valdef-stroke-origin-border-box">#valdef-stroke-origin-border-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-origin-border-box">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-origin-fill-box">
   <b><a href="#valdef-stroke-origin-fill-box">#valdef-stroke-origin-fill-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-origin-fill-box">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-stroke-origin-stroke-box">
   <b><a href="#valdef-stroke-origin-stroke-box">#valdef-stroke-origin-stroke-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-origin-stroke-box">4.4.3. Stroke Positioning Area: the stroke-origin property</a>
    <li><a href="#ref-for-valdef-stroke-origin-stroke-box①">4.4.7. Stroke Shorthand: the stroke property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-position">
   <b><a href="#propdef-stroke-position">#propdef-stroke-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-position">4.4.4. Positioning Stroke Images: the stroke-position property</a>
    <li><a href="#ref-for-propdef-stroke-position①">4.4.7. Stroke Shorthand: the stroke property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-size">
   <b><a href="#propdef-stroke-size">#propdef-stroke-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-size">4.4.5. Sizing Stroke Images: the stroke-size property</a>
    <li><a href="#ref-for-propdef-stroke-size①">4.4.7. Stroke Shorthand: the stroke property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-repeat">
   <b><a href="#propdef-stroke-repeat">#propdef-stroke-repeat</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-repeat">4.4.6. Tiling Stroke Images: the stroke-repeat property</a>
    <li><a href="#ref-for-propdef-stroke-repeat①">4.4.7. Stroke Shorthand: the stroke property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke">
   <b><a href="#propdef-stroke">#propdef-stroke</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke">2.1. SVG-Specific Paints</a>
    <li><a href="#ref-for-propdef-stroke①">4. Strokes (Outlines)</a>
    <li><a href="#ref-for-propdef-stroke②">4.4.1. Stroke Color: the stroke-color property</a>
    <li><a href="#ref-for-propdef-stroke③">4.4.7. Stroke Shorthand: the stroke property</a>
    <li><a href="#ref-for-propdef-stroke④">4.6.2. Stroke Shape</a>
    <li><a href="#ref-for-propdef-stroke⑤">4.7. Perfect-World Syntax</a>
    <li><a href="#ref-for-propdef-stroke⑥">5. Text Decoration Fills and Strokes</a> <a href="#ref-for-propdef-stroke⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-stroke-opacity">
   <b><a href="#propdef-stroke-opacity">#propdef-stroke-opacity</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-stroke-opacity">4.5.1. Stroke Opacity: the stroke-opacity property</a> <a href="#ref-for-propdef-stroke-opacity①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dash-positions">
   <b><a href="#dash-positions">#dash-positions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dash-positions">4.6.2. Stroke Shape</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cap-shapes">
   <b><a href="#cap-shapes">#cap-shapes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cap-shapes">4.2.3. Stroke End Shapes: the stroke-linecap property</a>
    <li><a href="#ref-for-cap-shapes①">4.6.2. Stroke Shape</a> <a href="#ref-for-cap-shapes②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="line-join-shape">
   <b><a href="#line-join-shape">#line-join-shape</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-join-shape">4.6.2. Stroke Shape</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>